.buyers-guide-carousel {
  .buyers-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 48px;
    padding-bottom: 16px;
  }

  .buyers-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: hidden;
  }

  .buyers-carousel::-webkit-scrollbar {
    display: none;
  }

  .slide-title {
    font-family: var(--body-font-family);
    font-weight: var(--fw-700);
    font-size: 24px;
    line-height: 26px;
    margin: 0;
    color: var(--primary-black);
    padding-top: 4px;
  }

  .carousel-counter {
    display: none;
    font-family: var(--body-heading-font-family);
    font-weight: var(--fw-400);
    font-style: italic;
    font-size: var(--heading-font-size-l);
    line-height: 48px;
    letter-spacing: 0%;
  }

  .carousel-slide {
    scroll-snap-align: start;
    min-width: 100%;
    box-sizing: border-box;
    height: auto;
  }

  .slide-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .slide-card {
    flex: 1;
    height: 173px;
    border: 1px solid #d1d1d1;
    background: linear-gradient(359deg, rgba(215, 116, 58, 0.1) -20.25%, rgba(255, 255, 255, 0.1) 54.66%);
    .card-image-wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
      .card-overlay-container {
        flex: 1;
      }
    }
  }

  .card-image-wrapper img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 104px;
    flex: 1;
  }

  .slide-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 40px;
  }

  .slide-title-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .slide-subtitle {
    margin: 0;
    font-weight: var(--fw-300);
    font-size: 12px;
    line-height: normal;
    color: var(--primary-black);
  }

  .arrow-controls {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-end;
  }

  .carousel-arrow {
    width: 32px;
    height: 32px;
    padding: 8px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-image: url(/icons/carousel-arrow-right-black.svg);
    background-size: 16px;
    border: 0.667px solid var(--primary-blue-700);
  }

  .carousel-arrow.prev {
    rotate: 180deg;
  }

  .slide-card {
    position: relative;
    overflow: hidden;
    height: auto;

    .card-title {
      font-weight: var(--fw-400);
      font-size: 14px;
      line-height: 15px;
      color: var(--tertiary-black);
      margin-bottom: 15px;
    }

    .card-subtitle {
      font-weight: var(--fw-300);
      font-size: 12px;
      line-height: normal;
    }
  }

  .card-overlay {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 13px 16px;
    justify-content: space-between;
    height: 100%;
  }

  .card-cta {
    color: var(--primary-blue-700);
    cursor: pointer;
    justify-content: end;
    font-weight: var(--fw-400);
    font-size: 14px;
    line-height: 20px;
    display: flex;
    text-align: right;
    margin-top: 6px;

    &::after {
      content: '';
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M15.9603 10.8674L9.50689 17.5098L8.69136 16.7064L15.1448 10.064L9.01656 10.1331L9.01265 8.98308L17.0815 8.89211L17.1679 17.0171L16.026 17.0384L15.9603 10.8674Z" fill="%23171C8F"/></svg>');
      background-repeat: no-repeat;
      background-position: center;
      display: inline-block;
      width: 10px;
      height: 10px;
      top: 4px;
      margin-left: 4px;
      transition: all 0.2s linear;
      position: relative;
    }
  }
}

.card-title {
  margin: 0;
}

.card-subtitle {
  margin: 0;
}

.carousel-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.slide-card.gradient1 {
  background: linear-gradient(359deg, rgba(215, 116, 58, 0.1) -48.53%, rgba(255, 255, 255, 0.1) 43.7%);
  border-bottom: 2px solid var(--accent-colours-vibrant-sections-1);
}

.slide-card.gradient1:hover {
  background-color: var(--accent-colours-vibrant-sections-1);
  transition: all 0.2s linear;
}

.slide-card.gradient1:hover .card-cta {
  border: 1px solid var(--accent-colours-vibrant-sections-1);
}

.slide-card.gradient2 {
  background: linear-gradient(359deg, rgba(57, 139, 215, 0.1) -48.53%, rgba(255, 255, 255, 0.1) 43.7%);
  border-bottom: 2px solid var(--accent-colours-vibrant-sections-2);
}

.slide-card:hover {
  background-color: var(--accent-colours-vibrant-sections-2);
  transition: all 0.2s linear;
}

.slide-card.gradient2:hover .card-cta {
  border: 1px solid var(--accent-colours-vibrant-sections-2);
}

.slide-card.gradient3 {
  background: linear-gradient(359deg, rgba(0, 188, 164, 0.1) -48.53%, rgba(255, 255, 255, 0.1) 43.7%);
  border-bottom: 2px solid var(--accent-colours-vibrant-sections-3);
}

.slide-card.gradient3:hover {
  background-color: var(--accent-colours-vibrant-sections-3);
  transition: all 0.2s linear;
}

.slide-card.gradient3:hover .bottom-section {
  border: 1px solid var(--accent-colours-vibrant-sections-3);
}

.slide-card.gradient4 {
  background: linear-gradient(359deg, rgba(197, 99, 177, 0.1) -48.53%, rgba(255, 255, 255, 0.1) 43.7%);
  border-bottom: 2px solid var(--accent-colours-vibrant-sections-4);
}

.slide-card.gradient4:hover {
  background-color: var(--accent-colours-vibrant-sections-4);
  transition: all 0.2s linear;
}

.slide-card.gradient4:hover .card-cta {
  border: 1px solid var(--accent-colours-vibrant-sections-4);
}

.slide-card.gradient1:hover,
.slide-card.gradient2:hover,
.slide-card.gradient3:hover,
.slide-card.gradient4:hover {
  transition: all 0.2s linear;
}

.slide-cards.has-more-cards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  .slide-card:nth-child(1) {
    flex: 0 0 100%; /* Full width */
  }

  .slide-card:nth-child(2),
  .slide-card:nth-child(3) {
    flex: 0 0 calc(50% - 8px); /* Half width each */
  }
}

.slide-cards.has-four-cards {
  .slide-card:nth-child(1) {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (width >= 768px) {
  .buyers-guide-carousel {
    .buyers-carousel-wrapper {
      padding-top: 8px;
    }
    .slide-card {
      height: 298px;
    }
    .slide-cards {
      flex-direction: row;
      &.has-four-cards,
      &.has-more-cards {
        .slide-card {
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            flex: 1 1 0;
          }
        }
      }
    }
    .card-image-wrapper img {
      height: 153px;
    }
  }
}

@media (width >=1024px) {
  .buyers-guide-carousel {
    .carousel-counter {
      display: block;
      .current-index {
        font-size: 20px;
        line-height: 14px;
        font-weight: var(--fw-500);
      }
      .total-count {
        font-size: 14px;
        line-height: 14px;
        font-weight: var(--fw-300);
      }
    }

    .buyers-carousel-wrapper {
      padding-top: 80px;
      padding-bottom: 0px;
    }

    .slide-title-wrap {
      gap: 40px;
    }

    .slide-title-row {
      gap: 16px;
    }

    .slide-title {
      font-size: 32px;
      line-height: 48px;
      padding-top: 0;
    }

    .slide-subtitle {
      font-size: 14px;
      line-height: 20px;
    }

    .carousel-counter {
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 12px;
    }

    .slide-cards {
      flex-direction: row;
      gap: 24px;
    }

    .slide-card {
      height: 460px;

      .card-title {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 6px;
      }

      .card-subtitle {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 32px;
      }

      .card-overlay {
        bottom: 16px;
        left: 16px;
        right: 16px;
        padding: 16px 24px 14px 24px;
        gap: 0;
      }

      .card-image-wrapper img {
        width: 100%;
        display: block;
        object-fit: cover;
        height: 190px;
      }

      .card-cta {
        font-size: 20px;
        line-height: 24px;
        margin-top: 0;
        justify-content: flex-start;
        margin-bottom: 14px;

        &::after {
          width: 14px;
          height: 14px;
          top: 6px;
          margin-left: 4px;
        }
      }

      .slide-cards.has-more-cards .card-cta {
        position: unset;
        padding-top: 6px;
      }

      .slide-cards.has-more-cards .card-subtitle {
        width: 100%;
      }

      .slide-cards.has-four-cards .card-subtitle {
        -webkit-line-clamp: 3;
        height: 48px;
      }
    }
    .carousel-controls {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 24px;
    }

    .carousel-arrow {
      width: 48px;
      height: 48px;
      padding: 14px;
      background-size: 28px;
    }

    .arrow-controls {
      justify-content: unset;
      gap: 16px;
    }
  }
}

@media (width >=1366px) {
  .slide-title-row {
    margin-bottom: 96px;
  }

  .card-image-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .buyers-guide-carousel {
    .slide-title {
      line-height: 38px;
    }
    .slide-card {
      .card-image-wrapper img {
        height: 200px;
      }
      .carousel-counter {
        margin-bottom: 8px;
      }
      .card-title {
        margin-bottom: 8px;
      }
      .card-subtitle {
        margin-bottom: 36px;
      }
      .card-cta {
        margin-bottom: 18px;
      }
    }
  }
}