.timeline__item {
  --test: 'Dit is een test 2.0';
/*   --text-stroke: var( var(--number-outline-size) var(--number-outline-color), 2px white); */
  --color: #172d4a;
  --height: 14rem;
  --number-size: 84px;
  --number-color: var(--number-color);
  color: var(--color);
  min-width: 23%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}

/* .timeline__item:nth-child(odd) */
/* .splide__slide:nth-child(odd) .timeline__item, */
.timeline__item--layout-image-bottom{
  --item-padding: 1rem 1rem 1rem calc(1rem + var(--item-left-spacing, 6rem));
}
/* .timeline__item:nth-child(even) */
/* .splide__slide:nth-child(even) .timeline__item, */
.timeline__item--layout-image-top {
  flex-direction: column-reverse;
  --jc: flex-end;
  --content-alignment: flex-start;
  --image-radius: 200rem 200rem 0 0;
}

.timeline__item-content {
  height: var(--height);
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: var(--content-alignment, flex-end);
}

.timeline__item-content-container {
  max-height: var(--height);
  padding: var(--item-padding, 1rem);
}

.timeline__item-image-wrapper {
  height: var(--height);
  display: flex;
  flex-direction: column;
  justify-content: var(--jc, flex-start);
}
.timeline__item-image-wrapper--hidden{
  opacity: 0;
}

.timeline__item-image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color);
  overflow: hidden;
  position: relative;
}

.timeline__item-image--border-radius-rounded{
  border-radius: var(--image-radius, 0 0 200rem 200rem);
}

.timeline__item-image-src{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.timeline__item-image-src--size-cover{
  object-fit: cover;
}

.timeline__item-title {
  margin: 0!important;
  color: var(--text-color, var(--color));
  font-weight: bold;
  font-size: var(--heading-size, 1.2rem);
  line-height: 1.2;
}
.timeline__item-title:before{
  display:none; 
}
.timeline__item-desc {
  margin-block: 0.5rem 0;
  color: var(--text-color, var(--color));
  font-size: 1.2rem;
  line-height: 1.5;
}

.timeline__item-desc p{
  margin: 0;
}

.timeline__item-index {
  color: var(--number-color, var(--color));
  font-size: var(--number-size, 84px);
  letter-spacing: var(--number-spacing, -10px);
  font-weight: bold;
  width: 2rem;
  height: var(--number-size, 84px);
  line-height: var(--number-size, 84px);
  vertical-align: bottom;
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 50%;
  translate: 0 var(--number-translate, 9px); 
}

@supports (-webkit-text-stroke: 2px white) {
  .timeline__item-index {
    -webkit-text-stroke: var(--text-stroke, 2px white);
    // -webkit-text-fill-color: --text-color, #172d4a;
  }
}

.timeline .splide__arrow--prev {
  left: 0;
  translate: -50% 0;
}

.timeline .splide__arrow--next {
  right: 0;
  translate: 50% 0;
}

.timeline .splide__arrow {
  scale: .5;
  top: calc(50% - 25px);
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

.timeline .splide__arrow:disabled{
  opacity: 0;
}

.timeline .splide__arrow svg {
  fill: var(--color, #172d4a);
}

.timeline .splide__pagination__page {
  transition: all 0.3s ease-in-out;
  background-color: var(--color, #172d4a);
}