@media (min-width: 640px) {
  .hero-content {
    padding: 20px;
  }

  .cards,
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .footer-row {
    display: contents;
  }

  #home-page-footer .footer-row {
    display: contents;
  }

  .cards-row {
    display: contents;
  }

}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .cards.cards-odd .cards-row:last-child > .service-card:last-child,
  .footer-grid.footer-odd .footer-row:last-child > section:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .hero-content {
    padding: 33px;
    gap: 16px;
  }

}

@media (min-width: 1024px) {
  .cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cards-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .cards-row-1,
  .footer-row-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .cards-row-2,
  .footer-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-row-3,
  .footer-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards-row-4,
  .footer-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services-layout {
    grid-template-columns: 1fr 220px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .footer-row {
    display: contents;
  }

  #home-page-footer .footer-row {
    display: contents;
  }
}

@media (min-width: 481px) and (max-width: 639.98px) {
  .cards,
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .footer-row {
    display: contents;
  }

  #home-page-footer .footer-row {
    display: contents;
  }

  .cards-row {
    display: contents;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .cards-row-3,
  .cards-row-4,
  .footer-row-3,
  .footer-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-device-type="desktop1280"] .cards-row-3,
html[data-device-type="desktop1280"] .footer-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-device-type="desktop1280"] .cards-row-4,
html[data-device-type="desktop1280"] .footer-row-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-device-type="desktop1280"] .cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html[data-device-type="desktop1280"] .cards-row {
  display: grid;
  gap: 8px;
}

html[data-device-type="desktop1280"] .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-device-type="desktop1280"] .footer-row {
  display: contents;
}

html[data-device-type="desktop1280"] #home-page-footer .footer-row {
  display: contents;
}

/* cards-row-4 must stay content-driven without fixed heights */
html[data-device-type="desktop1280"] .cards-row-4 > .service-card {
  height: auto;
  min-height: 0;
}

/* cards/services blocks must stay content-driven without fixed heights */
html[data-device-type="desktop1280"] .cards > .service-card,
html[data-device-type="desktop1280"] .cards .service-card,
html[data-device-type="desktop1280"] .services .service-card {
  height: auto;
  min-height: 0;
}

/* Keep desktop1280 hero banner height at baseline size */
html[data-device-type="desktop"] .sea,
html[data-device-type="desktop1280"] .sea {
  min-height: var(--device-hero-section-height);
  height: var(--device-hero-section-height);
}

/* Desktop hero height is computed from banner proportions */
html[data-device-type="desktop"] .sea {
  min-height: 0;
  height: auto;
  aspect-ratio: 1232 / 220;
}

html[data-device-type="desktop1280"] .sea,
html[data-device-type="desktop1920"] .sea,
html[data-device-type="desktop2560"] .sea {
  min-height: 0;
  height: auto;
  aspect-ratio: 2400 / 353;
}

html[data-device-type="desktop1920"] .hero-bg-desktop1920 {
  object-fit: cover;
  object-position: left center;
}