:root {
  --info-ink: #293649;
  --info-muted: #738088;
  --info-accent: #1792a2;
  --info-paper: #f7f6f2;
  --info-line: rgba(41, 54, 73, 0.16);
  --info-serif: "Playfair Display", Georgia, serif;
  --info-sans: "Montserrat", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--info-paper); color: var(--info-ink); font-family: var(--info-sans); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.info-main { padding-top: 88px; }
.info-container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.info-hero { display: grid; min-height: calc(100vh - 88px); grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr); align-items: center; gap: clamp(48px, 7vw, 104px); padding-block: clamp(72px, 9vw, 132px); }
.info-kicker { margin: 0 0 20px; color: var(--info-accent); font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.info-hero h1 { max-width: 10ch; margin: 0; font: 500 clamp(58px, 7vw, 108px)/.94 var(--info-serif); letter-spacing: -.05em; text-wrap: balance; }
.info-lead { max-width: 46ch; margin: 32px 0 0; color: var(--info-muted); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.7; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.info-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid var(--info-ink); border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.info-button--primary { background: var(--info-ink); color: #fff; }
.info-button:hover, .info-button:focus-visible { border-color: var(--info-accent); background: var(--info-accent); color: #fff; }
.info-media { overflow: hidden; border-radius: 8px; }
.info-media img { width: 100%; min-height: 620px; object-fit: cover; object-position: center; }
.info-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--info-line); }
.info-fact { padding: 32px 28px; border-right: 1px solid var(--info-line); }
.info-fact:first-child { padding-left: 0; }
.info-fact:last-child { border-right: 0; }
.info-fact span { display: block; margin-bottom: 10px; color: var(--info-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.info-fact strong { font: 500 26px/1.2 var(--info-serif); }
.info-footer { margin-top: clamp(72px, 9vw, 124px); padding: 48px 0; background: var(--info-ink); color: #fff; }
.info-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.info-footer img { width: 154px; filter: brightness(0) invert(1); }
.info-footer__links { display: flex; flex-wrap: wrap; gap: 16px 30px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.info-footer a:hover, .info-footer a:focus-visible { color: #53c1cb; }
.info-placeholder { display: grid; min-height: calc(100vh - 88px); place-items: center; padding-block: 80px; text-align: center; }
.info-placeholder h1 { margin: 0; font: 500 clamp(52px, 7vw, 96px)/.95 var(--info-serif); letter-spacing: -.045em; }
.info-placeholder p { max-width: 44ch; margin: 28px auto 0; color: var(--info-muted); font-size: 18px; line-height: 1.7; }
.info-placeholder .info-actions { justify-content: center; }

@media (max-width: 900px) {
  .info-hero { min-height: auto; grid-template-columns: 1fr; }
  .info-media { order: -1; }
  .info-media img { min-height: 440px; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .info-main { padding-top: 72px; }
  .info-container { width: min(100% - 32px, 620px); }
  .info-hero { gap: 36px; padding-block: 32px 72px; }
  .info-media img { min-height: 360px; aspect-ratio: 4 / 5; object-position: 58% center; }
  .info-hero h1 { font-size: clamp(48px, 15vw, 68px); }
  .info-lead { margin-top: 24px; font-size: 16px; }
  .info-actions { flex-direction: column; }
  .info-button { width: 100%; }
  .info-facts { grid-template-columns: 1fr; }
  .info-fact, .info-fact:first-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--info-line); }
  .info-fact:last-child { border-bottom: 0; }
  .info-footer__inner { align-items: flex-start; flex-direction: column; }
  .info-footer__links { flex-direction: column; gap: 14px; }
}