.featured-cards {
  & .collection-item__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  & .featured-cards__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  & .featured-cards__content[data-text-alignment="center"] {
    align-items: center;
  }

  & .featured-cards__content[data-text-alignment="right"] {
    align-items: flex-end;
  }

  & .featured-cards__heading {
    margin: 0;
  }

  & .featured-cards__copy {
    margin: 0;

    & > *:first-child {
      margin-top: 0;
    }

    & > *:last-child {
      margin-bottom: 0;
    }
  }

  & .featured-cards__button {
    margin-top: var(--spacing-4);
  }

  /* Make the whole card clickable when the card has its own button. */
  & .collection-item[data-stretched-link="true"] .featured-cards__button .button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  & .scroll-all-sizes .scroll-slider__slider {
    gap: var(--spacing-1);
  }

  & .scroll-slider-nav-button {
    color: var(--color-black);
    background-color: var(--color-background-primary-brand);
    padding: var(--spacing-5);

    &:not([disabled]) {
      opacity: 1;
    }

    & .icon {
      width: 24px;
      height: 24px;
    }
  }

  & .scroll-slider-nav-button-wrapper.scroll-slider-nav-button-wrapper--prev {
    left: var(--nav-button-offset);
  }

  & .scroll-slider-nav-button-wrapper.scroll-slider-nav-button-wrapper--next {
    right: var(--nav-button-offset);
  }
  
}

.featured-cards
  .collection-list__collections[data-standard-grid-spacing-type="collection-list"][data-collection-item-style="overlay"] {
  & .collection-item__image__wrap {
    margin: 0;
  }

  & .featured-cards__content {
    position: absolute;
    inset: var(--spacing-6);
    justify-content: flex-end;
    margin: 0;
    color: var(--color-white);
  }

  & .featured-cards__heading {
    line-height: 1;
    text-transform: uppercase;
    font-weight: var(--font-body-bold-weight);
  }

  & .collection-item__image,
  & .image-overlay {
    border-radius: var(--custom-border-radius);
    border-top-left-radius: 200px;
  }
  & .image-overlay {
    top: auto;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 100%;
    &[data-image-overlay-tint-style="gradient_up"] {
      background: linear-gradient(35deg, var(--color-overlay-tint) 0%, rgba(0, 0, 0, 0) 60%);
    }
  }
}

@media (max-width: 719px) {
  .featured-cards {
    & .scroll-slider.scroll-slider--full-width-below-720 .scroll-slider__slider {
      scroll-padding-left: unset;
      gap: var(--spacing-6);
    }
    & .scroll-slider-nav-button {
      display: none;
    }

    .image.aspect-ratio--square > * {
      aspect-ratio: 249 / 187;
    }

    & .collection-item {
      min-width: 253px;
    }
  }
}

@media (min-width: 720px) {
  .featured-cards .collection-list__inner[data-has-slider="true"][data-slider-desktop="true"] {
    & .scroll-slider {
      width: calc(100% + (var(--space-outer) * 2));
      margin-left: calc(var(--space-outer) * -1);
      margin-right: calc(var(--space-outer) * -1);
    }

    & .scroll-slider__slider {
      padding-left: var(--space-outer);
      padding-right: var(--space-outer);
      scroll-padding-left: var(--space-outer);
      scroll-padding-right: var(--space-outer);
      gap: var(--spacing-6);
    }
  }
}

@media (max-width: 959px) {
  .featured-cards.featured-cards--single-column-mobile {
    & .scroll-slider__slider > * {
      scroll-snap-align: center;
    }
  }
}

@media (min-width: 1024px) {
  .featured-cards {
    & .section-inner {
      max-width: unset;
    }
    & .featured-cards__copy {
      margin-right: var(--spacing-6);
    }
    & .image-overlay {
      left: var(--collection-item-image-padding);
      width: calc(100% - var(--collection-item-image-padding) - var(--collection-item-image-padding));
    }
  }
  /* Cards fit in one desktop row: slider below 1024px, grid above. */
  .featured-cards .collection-list__inner[data-slider-desktop="true"][data-grid-above-1024="true"] {
    & .scroll-slider {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    & .scroll-slider__slider {
      display: grid;
      grid-template-columns: repeat(var(--num-columns-desktop), minmax(0, 1fr));
      gap: var(--spacing-6);
      padding-left: 0;
      padding-right: 0;
    }

    & .scroll-slider-nav-button,
    & .scroll-slider-page-dots {
      display: none;
    }
  }
  .featured-cards .collection-list__collections[data-standard-grid-spacing-type="collection-list"][data-collection-item-style="overlay"] {
    & .collection-item__image,
    & .image-overlay {
      border-top-left-radius: 300px;
    }
  }
}

@media (min-width: 1200px) {
  .featured-cards {
    & .featured-cards__copy {
      margin-right: var(--spacing-14);
    }
  }
}