/* Homepage hero: one large banner and two small ones, all 3:2 (1500×1000 and 900×600 sources), so no
   picture is cropped or stretched. The columns are solved so that two small banners plus the gap are exactly
   as tall as the large one:  large = (2W − gap/2) / 3,  small = (W − 2.5·gap) / 3. */
.hero-grid {
  --hero-gap:16px;
  grid-template-columns:calc((200% - var(--hero-gap) / 2) / 3) minmax(0,1fr);
  gap:var(--hero-gap);
  align-items:start;
}

.hero-grid:not(:has(.hero-secondary)) {
  grid-template-columns:minmax(0,1fr);
}

.hero-grid .hero-main {
  height:auto;
  min-height:0;
  aspect-ratio:3/2;
  background:#eaf0f7;
}

.hero-secondary {
  display:grid;
  grid-template-rows:none;
  grid-auto-rows:auto;
  gap:var(--hero-gap);
  min-width:0;
}

.hero-secondary .small-promo {
  aspect-ratio:3/2;
  min-width:0;
  padding:0 23px;
}

.small-promo--image {
  padding:0;
  background:#eaf0f7;
  display:block;
}

.hero-secondary .small-promo--image {
  padding:0;
}

.small-promo--image picture {
  display:block;
  width:100%;
  height:100%;
}

.small-promo--image img {
  position:static;
  display:block;
  width:100%;
  height:100%;
  right:auto;
  bottom:auto;
  transform:none;
  object-fit:cover;
}

.hero-slider .hero-track {
  position:absolute;
  inset:0;
}

@media(max-width:767px) {
  .hero-grid {
    grid-template-columns:minmax(0,1fr);
    --hero-gap:10px;
  }
  .hero-grid .hero-main.has-mobile {
    aspect-ratio:4/3;
  }
  .hero-secondary {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .hero-secondary::-webkit-scrollbar {
    display:none;
  }
  .hero-secondary .small-promo {
    flex:0 0 80%;
    scroll-snap-align:start;
  }
  .hero-secondary .small-promo.has-mobile {
    aspect-ratio:4/3;
  }
  .hero-secondary>:only-child {
    flex-basis:100%;
  }}

a.benefit-item:hover strong,
a.benefit-item:focus-visible strong {
  color:var(--color-primary);
}

.benefit-item .icon-upload {
  width:25px;
  height:25px;
  object-fit:contain;
}
/* Feature strip under the hero: as many columns as fit on wide screens, two per row on tablets and phones. */
@media(max-width:1100px) {
  .benefit-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px;
  }
  .benefit-strip>.benefit-item {
    justify-content:flex-start;
    padding-left:8px;
  }
  .benefit-strip>.benefit-item:nth-child(2n) {
    border-right:0;
  }
}