/* carousel */
at-carousel {
  display: block;
}

.carousel__track {
  --scroll-snap-align: start;

  display: flex;
  flex-direction: row;
  overflow: scroll;
  scroll-snap-type: inline mandatory;

  >li {
    scroll-snap-align: var(--scroll-snap-align);
    scroll-snap-stop: always;
  }
}

.carousel__navigation {
  display: flex;
  flex-direction: row;
  gap: var(--sp-24);
}

.carousel__prev,
.carousel__next {
  transition: opacity var(--anime-time) var(--anime-func);

  &[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }

  &:active {
    transform: scale(0.95) translateX(var(--sp-1)) translateY(var(--sp-1));
  }
}

.carousel__pagination {
  display: none;
}

.testimonial {
  container: carousel / inline-size;

  .carousel__track {
    gap: var(--sp-64-48);

    >li {
      flex: 0 0 90%;
      display: flex;
      flex-direction: row;
      gap: var(--sp-64-48);

      @container (inline-size < 40.625rem) {
        flex: 0 0 100%;
      }

      @container (inline-size < 34.375rem) {
        flex-direction: column;
        gap: var(--sp-32);
      }

      img {
        object-fit: cover;
      }

      card-content {
        display: block;
        margin-block-start: auto;
        max-width: var(--sp-563);
      }

      p:nth-of-type(1) {
        margin-block-end: var(--sp-32);
      }

      p+p {
        margin-block-start: var(--sp-4);
      }
    }
  }

  .carousel__navigation {
    margin-inline-start: auto;
    width: fit-content;
    margin-block-start: var(--sp-64-48);
  }
}

.news-carousel {
  container: news-carousel / inline-size;

  .carousel__track {
    gap: var(--sp-64-48);

    >li {
      flex: 0 0 50%;

      @container (inline-size < 34.375rem) {
        flex: 0 0 100%;
      }

      p {
        margin-block-start: var(--sp-20);
      }
    }
  }

  .carousel__navigation {
    margin-inline-start: auto;
    width: fit-content;
    margin-block-start: var(--sp-64-48);
  }
}