.timeline-slider{
    border: .1rem solid var(--blue-gray);
    position: relative;
}



.tiemline-slider__slide-heading {
    font-size: var(--h6-size);
}
.timeline-slider__image {
    aspect-ratio: 1.25;
    background-size: cover;
    background-position: 50%;
    width: 100%;
    position: relative;
}
.timeline-slider__year{
    font-size: 2rem;
    color: var(--white);
    background-color: var(--black);
    position: absolute;
    padding: .2em 1em;
    top: 0;
    left: 0;
}
.timeline-slider__image-track{
    height: 100%;
    width: calc(var(--total-slides)*100%);
    --transform-offset: calc(-100%/var(--total-slides));
    transform: translate3d(calc(var(--transform-offset)*calc(var(--active-slide) - 1)), 0, 0);
    display: flex;
    transition: transform .5s ease;
}
.timeline-slider__content-track{
    height: 100%;
    width: calc(var(--total-slides)*100%);
    --transform-offset: calc(-100%/var(--total-slides));
    transform: translate3d(calc(var(--transform-offset)*calc(var(--active-slide) - 1)), 0, 0);
    display: flex;
    transition: transform .5s ease;
}
.timeline-slider__images {
    overflow: hidden;
    border-bottom: .1rem solid var(--blue-gray);
}
.timeline-slider__contents {
    overflow: hidden;
}
.timeline-slider__content {
    padding: 1rem;
    padding-bottom: calc(1rem + 2rem);
    flex: 1 1 0;
}




.slider__nav.timeline-slider__nav {
    display: flex;
    position: absolute;
    bottom: -2rem;
    right: 2rem;
    gap: .1rem;
}
.slider__nav.timeline-slider__nav .slider__button {
    padding: 1em;
    color: var(--white);
    border: 0;
    background-color: var(--black);
    transition: background-color .1s ease-in-out;
    width: 4rem;
    height: 4rem;
}


@media(min-width: 960px){
    .timeline-slider.slider {
        display: grid;
        grid-template-areas: "a b b"
                             "a c c";
        grid-template-rows: 1fr 19.25rem;
        grid-template-columns: 36rem 1fr 1fr;
        margin-top: 2rem;
    }
    .timeline-slider__images {
        grid-area: a;
        border-right: .1rem solid var(--blue-gray);
        border-bottom: 0;
    }
    .timeline-slider__contents{
        grid-area: c;
    }
    .timeline-slider__content{
        padding: 2rem;
        padding-bottom: 4rem;
    }

    .timeline-slider__image-nav{
        grid-area: b;
        overflow: hidden;
    }
    .timeline-slider__nav-image .timeline-slider__year {
        font-size: 1rem;
    }
    .timeline-slider__images{
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .timeline-slider__image-nav-track {
        display: flex;
        --transform-offset: calc(-100%/var(--total-slides));
        transform: translate3d(calc(var(--transform-offset)*calc(var(--active-slide))), 0, 0);
        transition: transform .5s ease;
        width: calc(33.34% * var(--total-slides));
    }
    .timeline-slider__nav-image {
        flex-basis: 100%;
        aspect-ratio: 1.25;
        background-size: cover;
        background-position: 50%;
        padding: 0;
        min-width: auto;
        border: none;
        position: relative;
        border: .1rem solid var(--blue-gray);
        border-left: 0;
        border-top: 0;
    }
}

.timeline-slider__nav-image:focus-visible{
    outline-offset: -.4rem;
}
.timeline-slider__nav-image:focus-visible .timeline-slider__year{
    background-color: var(--teal--safe);
}