.carousel {
    --carousel-button-color: #7c7c7c;
    --carousel-button-color-inactive: #c2c2c2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-inline: auto;
    margin-bottom: 3rem;
}

.carousel .carousel__container {
    --carousel-images-per-page: 1;
    --carousel-index: 0;
    --gap: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}

.carousel .carousel__container > .carousel__content {
  transition: transform 0.5s ease-in-out;
  transform: translateX(calc(var(--carousel-index) * -100%));

  flex: 0 0 calc((100% - (2 * var(--carousel-images-per-page) * var(--gap))) / var(--carousel-images-per-page));
  max-width: calc((100% - (2 * var(--carousel-images-per-page) * var(--gap))) / var(--carousel-images-per-page));

  aspect-ratio: 5/2;
  padding-inline: var(--gap);
  /*position: relative;*/
  /*font-size: 1.25rem;*/
  /*font-family: 'Open Sans', sans-serif;*/

  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .carousel__container > .carousel__content:nth-child(even) {
  /*background: lightblue;*/
}

.carousel .carousel__container .carousel__content > img {
    object-fit: cover;
    max-height: 3rem;
    max-width: 90%;
    display: block;
}


/*
    Buttons
*/
.carousel .carousel__button {
    --button-size: 1rem;

    border: var(--button-size) solid transparent;
    cursor: pointer;
    /*transition: 0.1s linear;*/
    background: transparent;
}

.carousel .carousel__button.scrollable:hover {    /* scrollable class = expecting click */
    opacity: 0.85;
}

/* Left */
.carousel .carousel__button.carousel__button--left {
    border-right: var(--button-size) solid var(--carousel-button-color-inactive);;
}
.carousel .carousel__button.carousel__button--left.scrollable {
    border-right-color: var(--carousel-button-color);
}

/* Right */
.carousel .carousel__button.carousel__button--right {
    border-left: var(--button-size) solid var(--carousel-button-color-inactive);
}
.carousel .carousel__button.carousel__button--right.scrollable {
    border-left-color: var(--carousel-button-color);
}


/*
    Media queries - change images per page
*/
@media only screen and (min-width: 560px) {
    .carousel .carousel__container {
        --carousel-images-per-page: 2;
    }
}

@media only screen and (min-width: 800px) {
    .carousel .carousel__container {
        --carousel-images-per-page: 3;
    }
}

@media only screen and (min-width: 1150px) {
    .carousel .carousel__container {
      --carousel-images-per-page: 4;
    }

    .carousel .carousel__container .carousel__content > img {
      max-width: 85%;
    }
}

@media only screen and (min-width: 1600px) {
    .carousel .carousel__container {
        --carousel-images-per-page: 5;
    }
}

@media only screen and (min-width: 2000px) {
    .carousel .carousel__container {
        --carousel-images-per-page: 6;
    }
}