/*
 * Liso® VPS-staging: pagina-specifieke stijlbron.
 * Pas uitsluitend deze file aan voor deze pagina. De gedeelde basis staat in /shared/css/.
 * Deze export is noindex en verandert www.liso.nl niet.
 */


/* Bron: assortment-hero.css */
/* Products.tsx-bronvertaling: foto, witte sluier en ingetogen verticale Liso-strengen. */
.liso-products-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 7rem 0 5rem;
  background: #fff8f3;
}

.liso-products-hero::after {
  display: none;
}

.liso-products-hero > .liso-products-hero-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

.liso-products-hero-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(255 255 255 / 95%), rgb(255 255 255 / 85%), rgb(255 255 255 / 95%));
  content: "";
}

.liso-products-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 51%;
}

.liso-products-hero > .liso-products-hero-strands {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(255 108 14 / 7%) 0 2px, transparent 2px 1rem);
}

.liso-products-hero h1 {
  max-width: 750px;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
}

@media (min-width: 768px) {
  .liso-products-hero {
    padding: 7rem 0 5rem;
  }
}

@media (max-width: 639px) {
  .liso-products-hero {
    padding: 7rem 0 5rem;
  }

  .liso-products-hero > .liso-products-hero-strands {
    width: 6rem;
    background-size: 11px 100%;
  }
}