/*
 * Hehobanners — front-office styles.
 * Module-contained: no external dependency, no framework class reused.
 */

.hehobanners-banner {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 24px 0;
}

.hehobanners-banner.hehobanners-layout-single {
  grid-template-columns: 1fr;
  grid-template-areas: "slot1";
}

.hehobanners-banner.hehobanners-layout-double {
  grid-template-columns: 70fr 30fr;
  grid-template-areas: "slot1 slot2";
}

.hehobanners-banner.hehobanners-layout-triple {
  grid-template-columns: 70fr 30fr;
  grid-template-areas:
    "slot1 slot2"
    "slot1 slot3";
}

.hehobanners-banner .hehobanners-slot {
  min-width: 0;
}

.hehobanners-banner .hehobanners-slot--1 { grid-area: slot1; }
.hehobanners-banner .hehobanners-slot--2 { grid-area: slot2; }
.hehobanners-banner .hehobanners-slot--3 { grid-area: slot3; }

@media (max-width: 768px) {
  .hehobanners-banner.hehobanners-layout-double,
  .hehobanners-banner.hehobanners-layout-triple {
    grid-template-columns: 1fr;
    grid-template-areas:
      "slot1"
      "slot2"
      "slot3";
  }
}

/*
 * Slider — embla viewport / container.
 * The viewport clips overflow; the container is a flex row of slides.
 */
.hehobanners-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hehobanners-slider__viewport {
  overflow: hidden;
  width: 100%;
}

.hehobanners-slider__container {
  display: flex;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hehobanners-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}

.hehobanners-slider--static .hehobanners-slide {
  flex: 0 0 100%;
}

.hehobanners-slide__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hehobanners-picture,
.hehobanners-image {
  display: block;
  width: 100%;
  height: auto;
}

.hehobanners-image {
  object-fit: cover;
}