.carousel-card {
  background-color: $base-black;

  .swiper {
    margin-top: 0;

    &-slide {
      min-width: 336px;
    }

    &-container {
      padding: 0;
      height: auto;
      min-height: 200px;
    }

    &-navigation {
      top: 100%;
    }

    &-button-prev {
      left: 0;
    }

    &-button-next {
      right: unset;
      left: 64px;
    }
  }

  .card-slide {
    padding: $base-spacing-3-4th;
    padding-bottom: $base-spacing-1-half;
    color: $base-white;
    text-align: left;
    height: 100%;

    .card-bar {
      height: 8px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.25);
      margin-bottom: $base-spacing-1-half;
    }

    h4:first-of-type {
      margin-bottom: $base-spacing;
    }
  }

  .swiper-slide-thumb-active {
    .card-slide {
      .card-bar {
        background-color: $sky-blue-500;
      }

      h4 {
        font-weight: 700;
      }
    }
  }
}