.tpg_featured_collection_list {
  display: flex;
  --tpg-gap: 4px;
  --tpg-slides-per-view: 4;
  --tpg-container-padding: 2rem;
  --tpg-content-gap: 0px;
  --tpg-richtext-width: calc(
    ((100% - var(--tpg-content-gap)) * 0.8 - (var(--tpg-gap) * (var(--tpg-slides-per-view) - 1)))
      / var(--tpg-slides-per-view)
  );
  align-items: center;
  position: relative;
  column-gap: var(--tpg-content-gap);
  align-items: stretch;

  @media screen and (max-width: 749px) {
    --tpg-slides-per-view: 2;
  }

  .featured_mobile_heading_link {
    display: none;
  }

  .featured_richtext {
    width: calc(25% + 40px);
    padding: 0 20px;
    margin-left: -20px;
    background-color: white;
    z-index: 3;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    @media screen and (max-width: 749px) {
      display: none;
    }

    &::after {
      content: '';
      position: absolute;
      width: 500px;
      height: 100%;
      background-color: #fff;
      top: 0;
      bottom: 0;
      left: -500px
    }

    .richtext_title {
      font-size: 26px;
    }

    .richtext_description {
      font-family: var(--font-body-family);
      font-size: 14px;
      font-weight: 300;
      line-height: 22px;
      letter-spacing: 0.02em;
    }

    .richtext_button {
      border: 1px solid rgba(29, 29, 29, 1);
      background-color: transparent;
      padding: 0 2rem;
      height: 36px;
      min-height: unset;
      display: flex;
      align-items: center;
      width: max-content;

      a {
        font-family: Lato;
        font-size: 10px;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 15%;
        text-transform: uppercase;
        text-decoration: none;
      }
    }

    > * {
      margin: 0;
      padding: 0;
      height: fit-content;
    }
  }

  .featured_collections {
    flex: 80%;
    overflow: visible;
    min-width: 0;
    --tpg-slide-width: calc((100% - (var(--tpg-gap) * (var(--tpg-slides-per-view) - 1))) / var(--tpg-slides-per-view));

    &:not(.swiper-initialized) .swiper-wrapper {
      gap: var(--tpg-gap);
    }

    .swiper-wrapper {
      display: flex;

      .swiper-slide {
        height: unset;
      }
    }

    .featured_item {
      position: relative;
      flex: 0 0 var(--tpg-slide-width);
      width: var(--tpg-slide-width);

      > a {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .featured_image {
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        position: relative;
      }

      .featured_image > img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .featured_image::after {
        position: absolute;
        content: "";
        background: linear-gradient(180deg, rgba(97, 81, 81, 0) 0%, rgba(97, 81, 81, 0.5) 100%);
        background-blend-mode: multiply;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .featured_overlay_image {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
      }

      .featured_overlay_image > img {
        width: clamp(140px, 18vw, 250px);
        height: auto;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      position: absolute;
      top: 42%;
      transform: translateY(60%);

      svg {
        position: absolute;
        width: 45px;
        height: 45px;
      }
    }

    .swiper-button-disabled {
      display: none;
    }

    .swiper-button-prev {
      transform: translateY(60%) rotate(-180deg);
      left: 0.9rem;
    }

    .swiper-button-next {
      right: 0.9rem;
    }
  }
}

@media screen and (min-width: 1100px) {
  .tpg_featured_collection_list {
    --tpg-container-padding: 4.8rem;
    --tpg-content-gap: 8rem;
  }
}

@media only screen and (max-width: 1200px) {
  .featured_richtext{
    display: none;
  }
}

@media only screen and (max-width: 749px) {
  .tpg_featured_collection_list {
    flex-wrap: wrap;

    .featured_mobile_heading_link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
  }
}

@media only screen and (max-width: 749px) {
  .tpg_featured_collection_list {
    --tpg-gap: 4px;
  }
}

@media screen and (min-width: 750px) {
  .tpg_featured_collection_list {
    --tpg-gap: 9px;
  }
}