/* Site-specific CSS, loaded after the built CSS. */

/* ---------- Small laptops (1024-1439px): a shorter home hero so the flight box shows on the first screen. ---------- */
@media (min-width: 1024px) and (max-width: 1439px) {
    main section > .container-site.pt-14:has(> h1.max-w-4xl) { padding-top: 3.5rem; }
    main section > .container-site.pt-14 > h1.max-w-4xl { margin-top: 1rem; font-size: clamp(2.75rem, 4.1vw, 3.5rem); }
    main section > .container-site.pt-14 > h1.max-w-4xl:first-child { margin-top: 0; }
    main section > .container-site.pt-14 > h1.max-w-4xl + p { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.7; }
}

/* ---------- Small laptops: beside long text, a square photo that stays in view while the text scrolls past. ---------- */
@media (min-width: 1024px) and (max-width: 1439px) {
    .home-sections section.grid.items-center:has(> .relative > .-inset-3) { align-items: start; }
    .home-sections section.grid.items-center > .relative:has(> .-inset-3) { position: sticky; top: 6.5rem; }
    .home-sections section.grid.items-center > .relative:has(> .-inset-3) img { aspect-ratio: 1 / 1; max-height: calc(100vh - 10rem); }
    .home-sections section.grid.items-center:has(> .relative > .-inset-3) > div:not(.relative) { align-self: center; }
}