.page-opening { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 42px; align-items: center; padding: 44px 36px 40px; margin-inline: -8px; margin-bottom: 36px; border-radius: 36px 36px 92px 36px; background: #f7f5eb; }
.page-opening h1 { font-size: clamp(3.25rem, 6.5vw, 6.3rem); max-width: 11.4ch; }
.opening-copy { font-size: 20px; max-width: 43ch; }
.field-caption { font-size: 16px; color: var(--muted); padding-top: 14px; }
.field-figure img { border-radius: 48px 48px 76px 48px; }
.hero-aside { align-self: center; padding-top: 34px; }
.hero-aside .margin-note { max-width: 36ch; margin-top: 28px; }
.hero-aside .margin-meaning { max-width: 37ch; }
.home-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; min-height: 52px; padding-block: 12px; width: fit-content; font-size: 18px; }
.home-entry::after { content: '↓'; font-size: 24px; }
@media (max-width: 1000px) and (min-width: 721px) { .page-opening { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding-inline: 24px; } .page-opening h1 { font-size: 6.3vw; } }
@media (max-width: 720px) { .page-opening { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-inline: -12px; padding: 28px 12px; border-radius: 24px 24px 64px 24px; } .page-opening h1 { font-size: clamp(2.75rem, 11.5vw, 4.75rem); max-width: 13ch; } .opening-copy { font-size: 19px; } .hero-aside { padding-top: 15px; } .field-figure { max-width: 440px; margin-inline: auto; } .hero-aside .margin-note { margin-top: 24px; } }