@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('assets/fonts/ZalandoSansExpanded-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('assets/fonts/ZalandoSansExpanded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; font-family: 'Zalando Sans Expanded', Arial, Helvetica, sans-serif; }
main { height: 100vh; height: 100dvh; overflow: hidden; }
.panels { display: flex; flex-direction: column; height: 100%; }
.panel { position: relative; isolation: isolate; display: flex; flex: 1; min-height: 0; overflow: hidden; border: 0; border-radius: 0; padding: 0; background: #000; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.panel img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease-out; }
.shade { position: absolute; inset: 0; background: rgb(0 0 0 / 50%); transition: background 500ms ease-out; }
.panel:hover img, .panel:focus-visible img { transform: scale(1.035); }
.panel:hover .shade, .panel:focus-visible .shade { background: rgb(0 0 0 / 40%); }
.panel:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.content { position: absolute; inset-inline: 1.5rem; bottom: 4rem; z-index: 1; display: flex; flex-direction: column; gap: .375rem; text-shadow: 0 1px 18px rgb(0 0 0 / 65%); }
.rule { height: 1px; width: 3rem; background: rgb(255 255 255 / 70%); }
.title { max-width: 12rem; font-size: clamp(1.35rem, 6.5vw, 1.85rem); font-weight: 300; line-height: .92; letter-spacing: .08em; text-transform: uppercase; }
.subtitle { max-width: 20rem; font-size: .56rem; font-weight: 500; line-height: 1rem; color: rgb(255 255 255 / 78%); }
#coming-soon { position: fixed; inset: auto auto 1.25rem 50%; width: min(calc(100vw - 2rem), 32rem); margin: 0; transform: translateX(-50%); border: 0; padding: 1rem 1.25rem; background: #b91c1c; color: white; font: 500 .875rem/1.5 'Zalando Sans Expanded', Arial, sans-serif; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
::selection { background: #000; color: #fff; }
@media (min-width: 768px) {
  .panels { flex-direction: row; }
  .content { inset-inline: 2.25rem; bottom: 3rem; gap: .75rem; }
  .title { max-width: 16rem; font-size: clamp(2rem, 3.6vw, 5rem); line-height: .9; }
  .subtitle { font-size: .875rem; line-height: 1.25rem; }
  .shade { background: rgb(0 0 0 / 42%); }
  .panel:hover .shade, .panel:focus-visible .shade { background: rgb(0 0 0 / 34%); }
}
@media (min-width: 1024px) {
  .content { inset-inline: 3rem; bottom: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}