/* ------------------------------------------------------------------------------------ */
/*  Card                                                                                */
/* ------------------------------------------------------------------------------------ */
:root {
  --card-padding: 10px;
  --card-title-font-size: 1.3em;
  --card-title-font-color:#224467;
  --card-highlight-font-color:#e39a1a;
  --card-highlight-font-size: 2.3rem;
  --card-content-font-size:1em;
  --card-content-line-height:1.5em;
}

/* Card */
.card {
  padding: var(--card-padding);
}
.card__title {
  text-align: center;
  font-size: var(--card-title-font-size);
  color: var(--card-title-font-color);
  font-weight: 700;
  margin-bottom: 1rem;
  display: block;
  width: 100%;
}
.card__highlight {
  text-align: center;
  font-size: var(--card-highlight-font-size);
  font-weight: 700;
  color: var(--card-highlight-font-color);
  display: block;
  width: 100%;
}
.card__content {
  text-align: left;
  font-size: var(--card-content-font-size);
  font-weight: 300;
  line-height: var(--card-content-line-height);
}

/* ------------------------------------------------------------------------------------ */
/*  Carousel                                                                            */
/* ------------------------------------------------------------------------------------ */
:root {
  --carousel-width: 100%;
  --carousel-list-width: 70vw;
  --carousel-list-max-width: 500px;
  --carousel-item-background-color: #fff;
  --carousel-item-border-color: #aaa;
  --carousel-item-width: 150px;
  --carousel-item-height: 170px;
  --carousel-item-border-radius: 8px;
  --carousel-item-active-border-color:#e39a1a;
  --carousel-item-active-background-color: rgb(227 154 26 / 10%);
  --carousel-item-card-padding: 10px;
  --carousel-item-card-title-font-size: 1.3em;
  --carousel-item-card-title-font-color:#224467;
  --carousel-item-card-highlight-font-color:#e39a1a;
  --carousel-item-card-highlight-font-size: 2.3rem;
  --carousel-item-card-content-font-size:1em;
  --carousel-item-card-content-line-height:1.5em;
  --carousel-button-background-color:#009ee0;
  --carousel-button-font-color:#fff;
  /* Overrule standard styling in card */
  --card-padding: var(--carousel-item-card-padding);
  --card-title-font-size: var(--carousel-item-card-title-font-size);
  --card-title-font-color: var(--carousel-item-card-title-font-color);
  --card-highlight-font-color: var(--carousel-item-card-highlight-font-color);
  --card-highlight-font-size: var(--carousel-item-card-highlight-font-size);
  --card-content-font-size:var(--carousel-item-card-content-font-size);
  --card-content-line-height:var(--carousel-item-card-content-line-height);
}

/* Block: carousel */
.carousel {
  width: var(--carousel-width);
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Element: carousel__item */
  /* Block: button (as part of carousel) */
}
.carousel__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 0;
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
.carousel__list {
  max-width: var(--carousel-list-max-width);
  width: var(--carousel-list-width);
  padding: 50px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  scroll-behavior: smooth;
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  /* Hide scrollbar for Chrome, Safari, and Opera */
}
.carousel__list::-webkit-scrollbar {
  display: none;
}
.carousel__item {
  scroll-snap-align: center;
  min-width: var(--carousel-item-width);
  height: var(--carousel-item-height);
  background-color: var(--carousel-item-background-color);
  border-radius: var(--carousel-item-border-radius);
  border: 1px solid var(--carousel-item-border-color);
}
.carousel__item.carousel__item--active {
  border-color: var(--carousel-item-active-border-color);
  background-color: var(--carousel-item-active-background-color);
}
.carousel__button {
  border: 0;
  background: var(--carousel-button-background-color);
  border-radius: 40px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--carousel-button-font-color);
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  /* Modifier: button variations */
}
.carousel__button span {
  fill: #fff;
}
@media screen and (min-width: 769px) {
  .carousel__button span svg {
    padding-top: 5px;
  }
}
.carousel__button.disabled {
  opacity: 0.5;
  pointer-events: none;
}