.shop-the-experience {
  gap: var(--space-sm);
  padding-block-start: var(--space-lg);
  padding-block-end: var(--space-xs);
  padding-inline: var(--space-page-margin);

  @media screen and (min-width: 990px) {
    padding-block-end: var(--space-lg);
    padding-inline: 0;
  }
}

.shop-the-experience__title-wrapper {
  gap: var(--space-xs);

  & .title {
    margin: 0;
  }
}

.shop-the-experience__content {
  height: 100%;
}

.shop-the-experience__media {
  --image-ratio-percent: calc(100% * 268 / 350);

  @media screen and (min-width: 990px) {
    --image-ratio-percent: 0;
    height: 100%;
    min-height: 701px;
    border-radius: 0 var(--border-radius-sm-2) var(--border-radius-sm-2) 0;
  }
}

.shop-the-experience__grid {
  flex-direction: column;

  @media screen and (min-width: 990px) {
    flex-direction: row;
    & .shop-the-experience__media-wrapper {
      flex: 1;
    }

    & .shop-the-experience__products-wrapper {
      width: var(--right-side-width);
      min-width: var(--right-side-width);
      padding: calc(var(--space-md) + var(--space-xs));
      gap: var(--space-sm);
    }
  }

  @media screen and (min-width: 1200px) {
    & .shop-the-experience__media-wrapper {
      width: calc(100% * 940 / 1440);
      min-width: calc(100% * 940 / 1440);
    }
  }
}

.shop-the-experience__products {
  @media screen and (min-width: 990px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: var(--space-xs);

    & > * {
      width: var(--product-card-width);
    }
  }
}

.shop-the-experience__product-card {
  & span:empty,
  & div:empty {
    display: none;
  }

  & .card+.card-information {
    padding-top: var(--space-xs);
  }

  & .card-information__content,
  & .card-information__meta {
    flex-direction: column;
    gap: var(--space-xs);
  }

  & .card-information__meta {
    min-height: var(--space-sm);
    justify-content: flex-end;
    gap: var(--space-2xs);
  }

  & .card-information__text,
  & .card-information__content .price {
    font: var(--body-font-mobile);
    line-height: 1;
    letter-spacing: var(--body-letter-spacing-mobile);
    padding-bottom: 0;

    @media (min-width: 768px) {
      font: var(--body-font-desktop);
      line-height: 1;
      letter-spacing: var(--body-letter-spacing);
    }
  }

  & .card-information__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  & .card-information__button {
    padding-top: 0;

    & .button {
      position: absolute;
      bottom: 0;
      right: 0;
      width: var(--space-lg);
      min-height: var(--space-lg);
      height: var(--space-lg);
      padding: 0;
      display: flex;
    }
  }

  & .product-card-variants {
    bottom: 0;
  }
}

.shop-the-experience__slider {
  margin-top: var(--space-sm);
  margin-inline: calc(0px - var(--space-md));

  & span:empty,
  & div:empty {
    display: none;
  }

  & > ul {
    padding-inline-start: var(--space-lg);
    padding-inline-end: var(--space-md);

    @media screen and (min-width: 750px) {
      padding-inline-start: var(--space-xl);
      padding-inline-end: var(--space-sm);
    }
  }

  & .shop-the-experience__slider-item {
    min-width: 69.74vw;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xs);

    @media screen and (min-width: 750px) {
      min-width: 45vw;
    }

    & + .shop-the-experience__slider-item {
      border-left: 1px solid var(--color-grey-200);
    }
  }

  & .card-wrapper > div {
    display: flex;
    gap: var(--space-xs);

    & > a {
      display: none;
    }
  }

  & .card--product {
    width: var(--product-card-image-width);
    min-width: var(--product-card-image-width);
  }

  & .card--product .card-information__button {
    display: none;
  }

  & .card+.card-information {
    padding-top: 0;
  }

  & .card-information__text,
  & .card-information__content .price,
  & .card-information__meta {
    font-size: var(--text-size-200);
    line-height: 1.2;
    letter-spacing: -0.24px;
    font-weight: 400;
  }

  & .card-information__content,
  & .card-information__meta {
    @media screen and (min-width: 750px) {
      flex-direction: column;
    }
  }

  & .card-information__meta {
    min-height: var(--space-md);
    justify-content: flex-end;
    gap: var(--space-2xs);
    display: flex;
    flex-direction: column;
  }

  & .card-information__button {
    padding-top: 0;

    & .button {
      position: absolute;
      bottom: 0;
      right: 0;
      width: var(--space-lg);
      min-height: var(--space-lg);
      height: var(--space-lg);
      padding: 0;
      display: flex;
    }
  }

  & .product-card-variants {
    bottom: 0;
  }
}