.card-carousel {
  margin: 0 auto;
  border-radius: calc(40/10 * 1rem);
  background-color: var(--color--aqua);
  padding: calc(32/10 * 1rem) calc(14/10 * 1rem);
}

.card-carousel__inner {
  margin: 0 auto;
}

.card-carousel__header {
  text-align: center;
  margin-bottom: calc(25/10 * 1rem);

  @container (width > calc(768/10 * 1rem)) {
    display: flex;
    flex-direction: row;
    text-align: unset;
  }

  @container (width > calc(1200/10 * 1rem)) {

  }
}

.card-carousel__icon {
  display: none;

  @container (width > calc(768/10 * 1rem)) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: calc(20/10 * 1rem);
    max-width: calc(64/10 * 1rem);
    height: auto;

  }

  @container (width > calc(1200/10 * 1rem)) {

  }

  img {
    max-width: calc(64/10 * 1rem);
    height: auto;
  }
}

.card-carousel__title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}


.card-carousel__carousel-wrapper {
  margin: 0 auto;

  @container (width > calc(768/10 * 1rem)) {
    max-width: calc(500/10 * 1rem);
  }

  @container (width > calc(992/10 * 1rem)) {
    max-width: calc(700/10 * 1rem);
  }

  @container (width > calc(1200/10 * 1rem)) {
    max-width: 90%;
  }


  div.slick {
    position: relative;
  }
}


/**
 Slick Slider Styles  -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 */

.card-carousel {
  --button-font-size: calc(20/10 * 1rem);
  --button-size: calc(40/10 * 1rem);
  --button-margin: calc(15/10 * 1rem);
  --button-movement: calc(-1 * (var(--button-size) + var(--button-margin)));

  @container (width > calc(768/10 * 1rem)) {
    --button-font-size: calc(24/10 * 1rem);
    --button-size: calc(40/10 * 1rem);
    --button-margin: calc(15/10 * 1rem);
    --button-movement: calc(-1 * (var(--button-size) + var(--button-margin)));
  }

  @container (width > calc(992/10 * 1rem)) {
    --button-font-size: calc(26/10 * 1rem);
    --button-size: calc(50/10 * 1rem);
    --button-margin: calc(20/10 * 1rem);
    --button-movement: calc(-1 * (var(--button-size) + var(--button-margin)));
  }

  @container (width > calc(1200/10 * 1rem)) {
    --button-font-size: calc(32/10 * 1rem);
    --button-size: calc(69/10 * 1rem);
    --button-margin: calc(25/10 * 1rem);
    --button-movement: calc(-1 * (var(--button-size) + var(--button-margin)));
  }

  .button-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .button-wrapper--prev {
    position: absolute;
    left: var(--button-movement);
  }

  .button-wrapper--next {
    position: absolute;
    right: var(--button-movement);
  }


  div.slick-track {
    gap: calc(25/10 * 1rem);
  }


  /** Basic fallback for when slider is loading */

  .slick__slider:not(.slick-initialized) {
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    gap: calc(25/10 * 1rem);

    > .slick__slide {
      flex: 0 0 calc(300 / 10 * 1rem);
      width: calc(300 / 10 * 1rem);

      @container (width > calc(768/10 * 1rem)) {

      }

      @container (width > calc(992/10 * 1rem)) {
        flex: 0 0 calc(350 / 10 * 1rem);
        width: calc(350 / 10 * 1rem);
      }
    }
  }
}

button.slick-arrow {
  --button--background-color: #B8F4EA;
  --button--text-color: black;
  --button--background-color--hover: white;
  --button--text-color--hover: black;
  --button--border-color: black;
  --button--border-color--hover: black;

  display: inline-flex;
  font-weight: 700;
  border-radius: calc(360/10 * 1rem);
  line-height: 1.1;
  text-transform: none;
  position: relative;
  top: 0;

  width: var(--button-size);
  height: var(--button-size);
  justify-content: center;
  align-items: center;

  i.icon {
    font-size: var(--button-font-size);
  }

  font-size: calc(32/10 * 1rem);
  padding: 0;
  box-shadow: 0 calc(3/10 * 1rem) 1px black;

  @container (width > calc(992/10 * 1rem)) {
    box-shadow: 0 calc(5/10 * 1rem) 1px black;
  }

  @container (width > calc(1200/10 * 1rem)) {
    box-shadow: 0 calc(8.6/10 * 1rem) 1px black;
  }

  background: var(--button--background-color);
  color: var(--button--text-color) !important;
  text-decoration: none;
  border: 1px solid var(--button--border-color);

  transition: top 150ms ease, box-shadow 150ms ease;

  &:hover {
    background: var(--button--background-color--hover);
    color: var(--button--text-color--hover) !important;
    --color--link: var(--button--text-color--hover);
    border-color: var(--button--border-color--hover);

    top: calc(3/10 * 1rem);
    box-shadow: none;

    @container (width > calc(992/10 * 1rem)) {
      top: calc(5/10 * 1rem);
    }

    @container (width > calc(1200/10 * 1rem)) {
      top: calc(8.6/10 * 1rem);
    }

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: -10px;
      height: 10px;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

button.slick-prev i {
  transform: rotate(180deg);
}