/* About page: prevent viewport overflow and keep the fixed header clear of content. */
@media (max-width: 767px) {
  body:has(img[alt="Grandex traveler sailing at sunset"]) {
    overflow-x: clip;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) main {
    overflow-x: clip;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) header nav {
    padding-top: max(0.875rem, env(safe-area-inset-top));
    padding-bottom: 0.875rem;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) main > section:first-child {
    min-height: 0;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) main > section:first-child > div:last-child {
    padding-top: max(7.5rem, calc(env(safe-area-inset-top) + 5.5rem));
    padding-bottom: 4rem;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) img[alt="Grandex traveler sailing at sunset"] {
    width: 100%;
    height: min(70svh, 26rem);
    min-height: 19rem;
    object-fit: cover;
    object-position: center;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) main > section:nth-of-type(2) .grid {
    gap: 2rem;
  }

  body:has(img[alt="Grandex traveler sailing at sunset"]) main > section:nth-of-type(3) .grid {
    gap: 1.25rem;
  }
}

@media (max-width: 374px) {
  body:has(img[alt="Grandex traveler sailing at sunset"]) main > section:nth-of-type(3) .grid {
    gap: 1rem;
  }
}