/**
  required vars:

  --product-carousel-breakout-size
    defines the left and right range of the outbreak container

  --product-carousel-product-width-init
    defines the initial width of a product

  --product-carousel-product-height-init
    defines the initial height of a product, need for correction of the absolute break otherwise following content
    can be overlapped.

  --product-carousel-product-width-1024
  --product-carousel-product-height-1024
  --product-carousel-product-width-1530
  --product-carousel-product-height-1530
 */

.product-carousel {
  --product-carousel-mobile-spacing: calc(
    var(--product-carousel-breakout-size) / 2
  );

  position: relative;
  display: grid;
  grid-template-areas:
    'header'
    'products'
    'cta';
  align-items: center;
  gap: 1rem;

  @media (min-width: 1080px) {
    grid-template-areas:
      'header cta'
      'products products';
  }
}

.product-carousel__title {
  grid-area: header;
  display: block;
}

.product-carousel__product {
  flex-basis: var(--product-carousel-product-width-init);
  flex-shrink: 0;
  scroll-snap-align: start;
}

.product-carousel__main {
  max-width: 100rem;
  grid-area: products;
  width: calc(100% + var(--product-carousel-breakout-size));
  margin-left: calc(var(--product-carousel-mobile-spacing) * -1);
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-padding: var(--product-carousel-mobile-spacing);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-carousel__main::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.product-carousel__products {
  padding-right: var(--product-carousel-mobile-spacing);
  padding-left: var(--product-carousel-mobile-spacing);
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.product-card__header {
  position: relative;
}

.product-carousel__footer {
  grid-area: cta;
  @media (min-width: 1080px) {
    justify-self: end;
  }
}
.product-card__tags {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  pointer-events: none;
  user-select: none;
  gap: var(--gap-sm-xs);
  padding: var(--padding-sm-sm);
}

@media (min-width: 768px) {
  .hero-video-wrapper .video-wrapper {
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .product-carousel__product {
    flex-basis: var(--product-carousel-product-width-1024);
  }
}

@media (min-width: 1530px) {
  .product-carousel__products {
    gap: 2em;
  }
  .product-carousel__product {
    flex-basis: var(--product-carousel-product-width-1530);
  }
}