.featured-products {
  position: relative;
  overflow: hidden;
  padding-block: clamp(7rem, 12vw, 12rem);
  color: var(--color-obsidian-950);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 34%), transparent 44%),
    #e7dfd2;
}

.featured-products::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgb(8 11 11 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(8 11 11 / 4%) 1px, transparent 1px);
  background-size: 8rem 8rem;
  mask-image: linear-gradient(90deg, black, transparent 75%);
  pointer-events: none;
}

.featured-products .eyebrow {
  color: #765721;
}

.featured-products__header {
  position: relative;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  opacity: 1;
  transform: translateY(0);
}

.featured-products.is-motion-ready .featured-products__header {
  opacity: 0;
  transform: translateY(2rem);
}

.featured-products.is-product-visible .featured-products__header {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 760ms var(--ease-luxury),
    transform 900ms var(--ease-luxury);
}

.featured-products__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.55fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: 1rem;
}

.featured-products__title-row h2 {
  max-width: 11ch;
  color: #0a1110;
}

.featured-products__title-row p {
  color: rgb(8 11 11 / 64%);
}

.featured-products__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.7rem);
}

.featured-products__grid > .product-card {
  grid-column: span 2;
}

.featured-products__grid > .product-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.featured-products__grid > .product-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.featured-products__closing {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.featured-products .button--secondary {
  color: #0a0e0e;
  background: transparent;
  border-color: rgb(8 11 11 / 34%);
}

@media (max-width: 1199px) {
  .featured-products__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .featured-products__grid > .product-card {
    grid-column: span 2;
  }

  .featured-products__grid > .product-card:nth-child(4) {
    grid-column: auto / span 2;
  }

  .featured-products__grid > .product-card:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 767px) {
  .featured-products__title-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 599px) {
  .featured-products {
    overflow: hidden;
  }

  .featured-products__grid {
    width: 100%;
    grid-auto-columns: minmax(16rem, 88%);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.25rem 0.15rem 1rem;
    scroll-padding-inline: 0.15rem;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color:
      rgb(118 87 33 / 52%)
      rgb(8 11 11 / 8%);
  }

  .featured-products__grid > .product-card,
  .featured-products__grid > .product-card:nth-child(4),
  .featured-products__grid > .product-card:nth-child(5) {
    grid-column: auto;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-products__header {
    opacity: 1;
    transform: none;
  }
}