main {
    padding-top: 0;
    letter-spacing: var(--letter-spacing);
    word-spacing: var(--word-spacing);


}

.show-swiper,
.swiper section.title {
    height: 80vh;


}


div.swiper-slide:has(>section.introduction) {}



.show-swiper {
    border-radius: var(--border-radius);
    cursor: e-resize;

    min-height: 80vh;


    .swiper-slide {
        min-height: 80vh;

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

    picture {

        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        object-fit: contain;

        max-width: var(--max-width-big);
        max-height: 80vh;

        img {
            width: 100%;
            max-width: var(--max-width-big);
            max-height: 80vh;
            height: 100%;
            object-fit: contain;
        }
    }
}

.thumbs-swiper {
    cursor: pointer;
}



section.introduction {

    background-color: rgb(0, 0, 0);
    border-radius: var(--border-radius);
    margin: auto;
    aspect-ratio: 4/2.5;
    max-width: calc(100vw - var(--bm) * 2);
    /* background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    background-clip: text; */



    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;


    >* {
        color: rgb(255, 255, 255);
    }



    .name-title {

        display: flex;
        flex-direction: column;
        width: 100%;

        justify-content: space-between;

        .diploma {

            text-align: center;

        }
    }

    section.details {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }


}

section.small.introduction {
    height: 6vh;
    aspect-ratio: 4/3;
    width: 100%;
    background-color: black;

    font-size: .1rem;

    padding: 3px;



    >* {
        width: auto;
        background-color: white;


    }
}





main section.images {
    grid-column: 1/-1;

    height: 100vh;
    background-color: white;
    position: relative;
    z-index: 1;
    align-content: center;
}

section.informations {

    height: 70vh;
    position: sticky;
    bottom: 0;
    width: 100vw;
}

ul li {}



.swiper-slide {
    text-align: center;
    width: auto;
    height: 100%;
    max-width: 100%;
}



.slide-infos.is-hidden {
    opacity: 0;
}

.show-swiper img {
    width: auto;
    height: 100%;
}

.swiper-wrapper {
    align-items: center;
}

.thumbs-swiper {
    margin-top: 1rem;
}

.thumbs-swiper .swiper-wrapper {
    justify-content: center;
    margin-top: 10px;
}

.thumbs-swiper .swiper-slide {
    width: auto;
    height: 100%;
    opacity: 0.4;
    gap: 1rem;

    img {
        height: 5vw;
    }
}

.thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1;
    transition: opacity var(--animation-duration) var(--animation-easing);
}

.swiper {}

/* span.mention::before {
    content: "(";
}

span.mention::after {
    content: ")"
} */


.graduate-place a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: center;
}

section.social {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);

    width: 100%;
    grid-column: 1/-1;
    padding: 0 .5em;
}

section.social span.name {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
}

section.social span.networks {
    grid-column: 2;
    grid-row: 1;
}



section.description {
    grid-column: 1/-1;
    max-width: var(--max-width-big);
    letter-spacing: var(--letter-spacing);
    word-spacing: var(--word-spacing);

    margin-bottom: var(--bm);
}

/* .swiper-button-next,
.swiper-button-prev {
    font-family: "Futura" !important;
    height: 100% !important;
    top: 0 !important;
    width: 20% !important;
    color: transparent !important;
}

.swiper-button-next {
    cursor: e-resize !important;
}

.swiper-button-prev {
    cursor: w-resize !important;
}

.swiper-button-prev::after {
    mix-blend-mode: difference;
    font-family: "Futura" !important;
    content: "←" !important;
    font-size: 300%;
    color: black;
}

.swiper-button-next::after {
    mix-blend-mode: difference;
    font-family: "Futura" !important;
    content: "→" !important;
    font-size: 300%;
    color: black;
} */

.related {
    section.title {
        display: flex;
        justify-content: space-between;

    }


    li {
        position: relative;

        picture {
            display: flex;
            width: 100%;


            img {
                position: absolute;
                object-fit: cover;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0;
                z-index: -1;
            }
        }


        &:hover picture img {
            opacity: .5;
        }
    }
}

@media (width < 968px) {

    main {
        padding-top: var(--bm);

        .thumbs-swiper .swiper-wrapper {
            justify-content: left;
            margin-top: 10px;

            img {
                height: 10vw;
            }

        }

    }

    .mobile-carousel {

        .title.introduction {
            aspect-ratio: 4/3;
            text-align: center;
            margin: 0;
            width: calc(100vw - var(--bm) * 1);
        }

        display: flex;
        flex-direction: column;
        gap: var(--bm);

        picture {
            width: 100%;
            height: auto;
            object-fit: contain;

            img {
                width: 100%;
                height: auto;
                object-fit: contain;
            }
        }
    }

    section.graduate-item {
        margin-bottom: calc(var(--gap) * 3);
    }

    main section.images {
        height: auto;
    }


    .show-swiper,
    .swiper section.title {
        height: auto;

    }

    .swiper section.title {
        height: auto;
        aspect-ratio: 4/3;
    }


    section.introduction {
        aspect-ratio: auto;
        width: 100%;

        span {
            font-size: var(--fs);
        }

        section.details span {
            font-size: var(--small-fs) !important;
        }


    }

    .thumbs-swiper {
        section.introduction {
            display: none;
        }
    }


    section.small.introduction {

        span {
            font-size: .1rem;
        }
    }

    .show-swiper {
        min-height: 100%;
        border-radius: var(--border-radius);
        height: auto;
        width: 100%;

        .swiper-slide {
            min-height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        }






        picture {
            width: 100%;
            height: auto;
        }

        img {
            width: 100%;
            height: auto;


        }
    }


    .related {

        margin-inline: calc(var(--bm) * -1);




        .related-wrapper {

            width: 100vw;






        }

        .title.title-card {
            h3 {
                display: none;
            }
        }
    }



    .bounce.card {

        margin-block: calc(var(--gap) *2);

        a.flex {
            flex-direction: column;

        }
    }
}