@media (min-width: 640px) {
  .sm\:block  { display: block }
  .sm\:hidden { display: none }
}

@media (min-width: 640px) {
  .sm\:py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem }
  .sm\:pb-5  { padding-bottom: 1.25rem }
  .sm\:mb-12 { margin-bottom: 3rem }
}
@media (min-width: 1024px) {
  .lg\:gap-10 { gap: 2.5rem }
}
.pb-7  { padding-bottom: 1.75rem }
.pb-10 { padding-bottom: 2.5rem }

@media (max-width: 639px) {
  
  .ds-hero-collage .ds-layer {
    transition: none;
    will-change: auto;
  }

  .ds-hero-grid {
    gap: 3.25rem;
    padding-bottom: 1.75rem;
  }
  .ds-hero-marquee { padding-top: 0 }
  .ds-hero-collage { min-height: 296px !important }
  .ds-hero-card-1  { top: 0 !important; left: 6% !important; width: 58% !important }
  .ds-hero-card-2  { top: 17% !important; right: -1% !important; width: 42% !important }
  .ds-hero-card-3  {
    bottom: auto !important;
    top: 45% !important;
    left: 2% !important;
    width: 36% !important;
  }
}

.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem }