body {
    height: 100vh;
    overflow: hidden;
}

nav {
    margin: 1em;
}

.swiper {
    width: 100%;
    height: 100%;
}



.swiper-slide {
    text-align: center;
    font-size: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}



.swiper.main {
    height: 87%;
    width: 100%;
}

.swiper.thumbs {
    height: 10%;
    box-sizing: border-box;

    margin: 1em;
}

.swiper.thumbs .swiper-slide {

    height: 100%;
    filter: grayscale(1);

}


.swiper.thumbs .swiper-slide-thumb-active {
    opacity: 1;
    filter: grayscale(0);
}

.swiper.main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper.main .swiper-slide img {
    width: 80vw;
    height: 80vh;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.swiper .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: .2em;

    font-family: "FF Ultra", sans-serif;
    font-weight: 900;
    font-feature-settings: "onum";
    color: rgb(255, 255, 255);
    background-color: black;
    padding: .4em;
    width: fit-content;
    left: 50%;
    transform: translate(-50%, 0);
}

.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after {
    font-family: "FF Ultra", sans-serif;
    font-weight: 900;
    font-size: 1em;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: rgb(255, 255, 255);
    background-color: black;
    padding: .4em;
}

.swiper .swiper-button-next::after {
    content: "→" !important;

}

.swiper .swiper-button-prev::after {
    content: "←" !important;

}

.swiper-button