.event h2 { font-family: "Benzin", sans-serif; font-weight: 800; text-transform: uppercase; }
.events { border-top: 1px solid rgba(242,242,242,.38); }
.event { min-height: 70px; padding: 4px 20px; border-bottom: 1px solid rgba(242,242,242,.38); display: grid; grid-template-columns: 78px 58px 100px minmax(0,1fr) 180px; align-items: center; column-gap: 20px; }
.event__date { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; color: var(--muted); line-height: 1; }
.event__date b { font-family: "Benzin", sans-serif; font-weight: 800; font-size: 27px; }
.event__date span { font-size: 14px; font-weight: 300; margin-top: 3px; }
.event__time { margin: 0; color: rgba(255,255,255,.32); text-align: center; font-size: 14px; font-weight: 300; line-height: 1.4; }
.event__image { width: 99px; height: 62px; object-fit: cover; border-radius: 4px; }
.event__content { text-align: center; }
.event h2 { margin: 0; font-size: clamp(20px, 1.75vw, 27px); line-height: .92; letter-spacing: 0; }
.event__content p { margin: 5px 0 0; color: rgba(255,255,255,.5); font-size: 14px; font-weight: 300; }
.event { grid-template-columns: 78px 58px 100px minmax(0, 1fr) 276px; }
.event { position: relative; transition: background-color 220ms var(--ease-out); }
.event:hover, .event:focus-within { background-color: rgba(242,242,242,.055); }
.event__page-link { position: absolute; inset: 0; z-index: 1; }
.event__visual { display: contents; }
.event__when { display: contents; }
.event__content { grid-column: 4; }
.event__page-link:focus-visible { z-index: 3; outline: 2px solid var(--paper); outline-offset: -3px; }
.event__image { transition: transform 280ms var(--ease-out); }
.event:hover .event__image, .event:focus-within .event__image { transform: none; filter: grayscale(1) brightness(1.08); }
.event h2, .event__content p { transition: color 220ms var(--ease-out), transform 280ms var(--ease-out); }
.event:hover h2, .event:focus-within h2 { color: var(--paper); transform: none; }
.event:hover .event__content p, .event:focus-within .event__content p { color: rgba(255,255,255,.78); }
.event .ticket { position: relative; z-index: 2; }
.event .ticket { grid-column: 5; }
@media (min-width: 901px) and (max-width: 1024px) {
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 900px) {
.event { grid-template-columns: 58px 46px 72px minmax(0, 1fr); column-gap: 10px; padding: 9px 12px; }
.event__image { width: 72px; height: 58px; }
.event h2 { text-align: left; font-size: 18px; }
.event__content { text-align: left; }
.event__content p { font-size: 12px; }
.ticket { grid-column: 4; grid-row: 2; justify-self: start; margin-top: 7px; }
.event:has(.ticket) { padding-bottom: 9px; }
}
@media (max-width: 520px) {
.event { grid-template-columns: 50px 40px 62px minmax(0, 1fr); column-gap: 7px; }
.event__date b { font-size: 22px; }
.event__date span, .event__time { font-size: 11px; }
.event__image { width: 62px; height: 54px; }
.event h2 { font-size: 16px; }
}
@media (max-width: 900px) {
}
@media (max-width: 520px) {
.event__content, .event h2, .event__content p { min-width: 0; }
.event__content p { font-size: 12px; }
.event h2 { overflow-wrap: anywhere; line-height: 1.05; }
.ticket { max-width: 100%; min-width: 0; padding-inline: 12px; font-size: 12px; line-height: 1.1; text-align: center; white-space: normal; }
}
@media (max-width: 520px) {
.event { grid-template-columns: 52px 70px minmax(0,1fr); grid-template-rows: auto; column-gap: 10px; align-items: center; padding: 14px 16px; }
.event:has(.ticket) { padding-bottom: 14px; }
.event__when { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; align-self: start; height: 70px; box-sizing: border-box; }
.event__image { grid-column: 2; grid-row: 1; width: 70px; height: 70px; aspect-ratio: 1; align-self: start; }
.event__content { grid-column: 3; grid-row: 1; align-self: start; padding-bottom: 34px; }
.ticket { grid-column: 3; grid-row: 1; justify-self: start; align-self: end; margin-top: 6px; }
}
.events-toolbar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0 40px; margin: 0 auto; }
.events-toolbar__title { margin: 0; font-family: "Benzin", sans-serif; font-size: clamp(20px,1.75vw,27px); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
@media (max-width: 520px) {
.events-toolbar__title { font-size: 16px; }
}
.events--cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 12px; margin-inline: 14px; border: 0; }
.events--cards .event { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; }
.events--cards .event:hover, .events--cards .event:focus-within { background: transparent; }
.events--cards .event__visual { display: block; position: relative; flex: none; width: 100%; aspect-ratio: 1.6; overflow: hidden; border-radius: 12px; }
.events--cards .event__image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.events--cards .event__when { display: block; position: absolute; z-index: 2; inset: 0; height: auto; align-self: auto; pointer-events: none; }
.events--cards .event__date { position: absolute; left: 6px; bottom: 6px; flex-direction: row; align-items: center; gap: 4px; padding: 6px 11px 6px 13px; border-radius: 12px; background: var(--paper); color: #262624; line-height: 1; text-transform: none; }
.events--cards .event__date b { font: 300 14px/1 "Suisse Intl",sans-serif; }
.events--cards .event__date span { margin: 0; font-size: 14px; line-height: 1; text-transform: lowercase; }
.events--cards .event__time { display: none; }
.events--cards .event__content { grid-column: auto; margin-top: 15px; padding: 0 11px; text-align: left; }
.events--cards .event h2 { font-size: clamp(16px,1.65vw,24px); line-height: 1.05; overflow-wrap: anywhere; }
.events--cards .event__content p { margin-top: 8px; font-size: 14px; line-height: 1.2; }
.events--cards .event .ticket { position: absolute; z-index: 2; right: 6px; bottom: 6px; grid-column: auto; justify-self: auto; margin: 0; }
@media (max-width: 900px) {
.events--cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; margin-inline: 16px; }
.events--cards .event__content { padding-inline: 6px; }
.events--cards .event h2 { font-size: clamp(15px,2.5vw,20px); }
.events--cards .event__content p { font-size: 12px; }
}
@media (max-width: 560px) {
.events--cards { grid-template-columns: minmax(0,1fr); gap: 24px; margin-inline: 12px; }
.events--cards .event h2 { font-size: clamp(20px,5.5vw,24px); }
.events--cards .event__content { margin-top: 15px; }
.events--cards .event__content p { margin-top: 6px; font-size: 14px; }
.events--cards .event__date b, .events--cards .event__date span, .events--cards .event .ticket { font-size: 12px; }
}
.events:not(.events--cards) .event { grid-template-columns: 78px 58px 100px minmax(0,1fr); grid-template-rows: minmax(70px,auto); }
.events:not(.events--cards) .event__visual { display: contents; }
.events:not(.events--cards) .event__badges { grid-column: 1 / 3; grid-row: 1; display: grid; grid-template-columns: 78px 58px; column-gap: 20px; align-items: center; min-width: 0; }
.events:not(.events--cards) .event__date { grid-column: 1; grid-row: 1; }
.events:not(.events--cards) .event__time { grid-column: 2; grid-row: 1; }
.events:not(.events--cards) .event__time { display: grid; grid-template-rows: 27px 14px; gap: 3px; align-content: center; line-height: 1; }
.events:not(.events--cards) .event__time span { display: block; line-height: 1; }
.events:not(.events--cards) .event__time span:first-child { align-self: center; }
.events:not(.events--cards) .event__image { grid-column: 3; grid-row: 1; }
.events:not(.events--cards) .event__content { grid-column: 4; grid-row: 1; min-width: 0; }
.events:not(.events--cards) .event .ticket { position: absolute; z-index: 2; top: 50%; right: 20px; grid-column: auto; grid-row: auto; margin: 0; transform: translateY(-50%); }
.events:not(.events--cards) .event:has(.ticket) .event__content { padding-right: 290px; }
.events--cards { row-gap: 39px; }
.events--cards .event__badges { position: absolute; z-index: 2; inset: auto 3px 3px; display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; pointer-events: none; }
.events--cards .event__date { position: static; flex: none; }
.events--cards .event__time { display: none; }
.events--cards .event .ticket { position: static; flex: none; min-height: 27px; max-width: 100%; margin: 0; pointer-events: auto; }
@media (max-width: 900px) {
.events:not(.events--cards) .event { grid-template-columns: 58px 46px 72px minmax(0,1fr); grid-template-rows: minmax(76px,auto); }
.events:not(.events--cards) .event__badges { grid-template-columns: 58px 46px; column-gap: 10px; }
.events:not(.events--cards) .event:has(.ticket) .event__content { padding-right: 0; padding-bottom: 38px; }
.events:not(.events--cards) .event .ticket { top: auto; right: auto; bottom: 9px; left: 206px; transform: none; }
.events--cards { row-gap: 31px; }
}
@media (max-width: 520px) {
.events:not(.events--cards) .event { grid-template-columns: 52px 70px minmax(0,1fr); grid-template-rows: minmax(70px,auto); column-gap: 14px; padding: 14px 16px; }
.events:not(.events--cards) .event__badges { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; align-self: start; gap: 3px; height: 70px; }
.events:not(.events--cards) .event__date, .events:not(.events--cards) .event__time { grid-column: auto; grid-row: auto; }
.events:not(.events--cards) .event__time { width: 100%; grid-template-rows: 12px 12px; gap: 3px; align-self: stretch; text-align: center; }
.events:not(.events--cards) .event__image { grid-column: 2; grid-row: 1; width: 70px; height: 70px; }
.events:not(.events--cards) .event__content { grid-column: 3; grid-row: 1; align-self: start; padding-bottom: 6px; }
.events:not(.events--cards) .event__content p { margin-top: 5px; }
.events:not(.events--cards) .event:has(.ticket) .event__content { padding-right: 0; }
.events:not(.events--cards) .event:has(.ticket) .event__content { padding-bottom: 6px; }
.events:not(.events--cards) .event .ticket { top: var(--mobile-ticket-top, auto); bottom: auto; left: 166px; }
.events--cards { row-gap: 31px; }
.event__date span, .event__time { font-size: 12px; }
.event__date span, .event__time span:first-child { text-transform: lowercase; }
}
@media (min-width: 901px) {
}
@media (min-width: 521px) and (max-width: 900px) {
.events:not(.events--cards) .event__time { transform: none; }
}