:root {
    --gradient: black;
    --bm: 1rem;
    --max-width: 870px;
    --max-width-big: 1200px;
    --word-spacing: -0.02em;
    --line-height: 1.2;
    --letter-spacing: 0em;
    --underline: underline;
    --underline-thickness: .01em;
    --underline-offset: .2em;

    --border: 7px solid black;
    --animation-duration: .4s;
    --animation-easing: cubic-bezier(.75, 0, .25, 1);



    --fs: 1rem;
    --huge-fs: 3rem;

    --caption: .8rem;
    --away: #8f8f8f;
    --far-away: #F4F4F4;
    --near: #000000;
    --black: #fff;
    --font-near: 1.2em;
    --bg-color: #ffffff;

    --accent-color: #e0c4ffbc;
    --green: #0fd626;
    --sky: rgb(160, 219, 255);
    --header-height: 14rem;
    --border-radius: 4px;
    --gap: 2rem;
    --color-grey: #f0f0f0;
    --button-paddings: .3em 0.5em .4em 0.5em;
    --menu-padding: var(--button-paddings);
    --button-font-size: calc(1rem * 0.7);
    --swiper-pagination-color: black;

    --article-margin: 3vw;

    interpolate-size: allow-keywords;

}

@view-transition {
    navigation: auto;
}



::view-transition-old(root) {
    animation: 300ms ease-out both slide-out;
}

::view-transition-new(root) {
    animation: 300ms ease-out both slide-in;
}

@keyframes slide-out {
    from {

        opacity: 1;
    }

    to {

        opacity: 0;
    }
}

@keyframes slide-in {
    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }
}


::selection {
    background-color: var(--accent-color);
    color: rgb(0, 0, 0);
}

html {
    font-size: 22px;
    overflow-y: scroll;
    /* attention: permet de consider la scrollbar dans le vw... pour PC */

}

@media (width < 960px) {
    :root {
        --button-paddings: 0.3em 0.4em .4em 0.3em;
        --menu-padding: .3rem .4rem;
        --font-near: 1.5rem;
        --small-fs: 3vw;
        --button-font-size: calc(4vw);
    }


    html {
        font-size: 18px;

    }
}





main {
    position: relative;
    /* Needed to make z-index work */
    z-index: 1;
    padding: var(--bm);
    background-color: var(--bg-color);
    padding-top: 0;


    min-height: 100vh;
    transition: opacity var(--animation-duration) var(--animation-easing);



    /* padding-block-end: calc(var(--bm) * 3); */
    /* Make sure the content is on top of the footer */
}

h1,
.h1 {
    font-size: 3rem;
    margin-block: .3lh;
}

h2,
.h2 {

    padding: .5rem;

    text-align: center;
    border-top: var(--border);




}



p,
.paragraph,
ul,
h2,
h3,
li,
address {

    line-height: 130%;
    /* letter-spacing: -.005em; */
    word-spacing: -.02em;


}

.dimmed {
    color: var(--away);
    transition: color var(--animation-duration) var(--animation-easing);
}

p:has(+ul) {
    margin-bottom: 0 !important;
}


a {
    color: unset;
    text-decoration: none;
}

.fs-big>p,
.fs-big {
    font-size: 1.5rem;
    line-height: var(--line-height);
}

.small,
.fs-small {
    font-size: 0.7rem;
}



main article p a[target="_blank"]::after,
main article p a[href^="http"]:not([href*="isba-besancon.fr"])::after {

    content: "↗";
    line-height: 0;
    font-size: 0.8em;

    text-decoration-skip-ink: none;
    font-family: "MediaPoint";
}

li>p {
    display: inline;
}

blockquote {

    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    color: var(--away);
    font-style: italic;
}

.discrete {
    line-height: 1.1;
    padding-left: 3vw;
    pointer-events: none;
    user-select: none;
}


.mobile-visible {
    display: none
}

article {
    margin-left: var(--article-margin);

    a,
    u {
        text-decoration: underline;
        text-underline-offset: .2em;
        text-decoration-thickness: .01em;

        &:hover:not(.news-title):not(.button):not(.aside-nav-link):not(.card-link) {
            text-decoration: underline !important;
            text-decoration-style: double !important;
            text-underline-offset: .2em !important;
            text-decoration-thickness: .01em !important;

        }
    }

    p:has(+h2),
    ul,
    p {
        margin-bottom: 1em;

    }
}

main {
    u {
        text-decoration: underline;
        text-underline-offset: .2em;
        text-decoration-thickness: .01em;
    }
}



main ul {

    padding-left: 1rem;
    list-style: upper-alpha;


    list-style-position: inside;


    ::marker {
        font-variant-caps: all-small-caps;
        color: var(--away);
    }

}



em {
    font-style: italic;
}

figure.single-image {
    display: flex;
    flex-direction: column;
    justify-content: center;



    picture {


        display: flex;
    }
}

img {
    border-radius: var(--border-radius) !important;

}

hr {
    border: none;
    border-top: var(--border);
    margin: var(--bm) 0;

    /* &::before {
        content: "⁂";
        text-align: center;
        display: block;

        margin-top: calc(-1 * var(--border));
    } */
}



.button {
    align-items: center;
    font-size: var(--button-font-size);
    padding: var(--button-paddings);
    background: #ededed8f;
    backdrop-filter: blur(20px);
    transition: all calc(var(--animation-duration) /3) var(--animation-easing);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--near);
    cursor: pointer;
    font-family: "Futura";
    font-variant-numeric: normal;
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid transparent;
    user-select: none;
    line-height: 1;


    &.dies {
        aspect-ratio: 4/3;
        max-width: 40%;
    }
}


.berry-shape {
    --chamfer: 8px;
    --notch-pos: 67%;
    --notch-depth: 10px;
    --notch-width: 12px;

    clip-path: polygon(var(--chamfer) 0,
            calc(100% - var(--chamfer)) 0,
            100% var(--chamfer),
            100% var(--notch-pos),
            calc(100% - var(--notch-depth)) calc(var(--notch-pos) + var(--notch-width)),
            100% calc(var(--notch-pos) + var(--notch-width)),
            100% calc(100% - var(--chamfer)),
            calc(100% - var(--chamfer)) 100%,
            var(--chamfer) 100%,
            0 calc(100% - var(--chamfer)),
            0 calc(var(--notch-pos) + var(--notch-width)),
            var(--notch-depth) calc(var(--notch-pos) + var(--notch-width)),
            0 var(--notch-pos),
            0 var(--chamfer));
}

.button.inverted {
    margin-inline: auto;
    background: black;
    color: white;
    background-size: 100%;
    width: fit-content !important;
}


.helvetius {
    font-family: "Helvetius", serif !important;

}

.mediapoint {
    font-family: "MediaPoint";
    font-size: .8rem !important;
    letter-spacing: .3px;
    word-spacing: -.30rem;



}

.stencil {
    font-family: "Futura Stencil";
    letter-spacing: 0.5px;
}

.futura {
    font-family: "Futura";
}

.upper {
    text-transform: uppercase;
}

::focus {
    outline: 2px solid rgb(0, 64, 255);
    outline-offset: 3px;
    border-radius: var(--border-radius);
}

/* .gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  
    pointer-events: none;
 
    background: var(--gradient-homepage);

    z-index: 3;
 
    mix-blend-mode: lighten;
   
} */

html,
article.places>section {
    scroll-behavior: smooth;
}

body {
    background-color: white;
    font-family: "Helvetius", serif;
    font-variant-numeric: oldstyle-nums;

}


@keyframes animatedBackground {
    from {
        background-position: 0px 10%;
    }

    to {
        background-position: 100vw 10%;
    }
}


p,
span,
ul.submenu>*,
section.navigation label {
    font-feature-settings: "liga" 1;
    /* letter-spacing: -.04em;
    word-spacing: -.04em;
    line-height: 1em; */






}

main p {
    color: var(--near);
}







main p a:hover {

    /* text-decoration: none; */
}

strong,
.underline {

    text-decoration: underline;
    text-decoration-thickness: .01em;
    text-underline-offset: .2em;
}

h2:has(>strong) strong {
    text-decoration: none;
}

em {
    font-family: 'Helvetius', serif;
    font-style: italic;
    font-size: 100%;
    letter-spacing: 0em;
}

.tooltip {
    line-height: .1;
    position: relative;
    display: inline-block;
    cursor: help;
    text-indent: 0;
    text-decoration: underline dotted;
}

.tooltip>*:not(span.tooltiptext) {

    font-feature-settings: "c2sc";
    text-decoration: underline dotted;
}



/* Tooltip text */
.tooltip .tooltiptext {
    line-height: var(--line-height);
    --width: 450px;
    text-indent: 0;
    position: absolute;
    z-index: 1;

    width: var(--width);
    bottom: 1000%;
    left: 0;
    margin-left: calc(var(--width) * -0.4);

    background-color: black;
    color: #fff;
    padding: .4em .6em;
    border-radius: var(--border-radius);
    text-align: center;

    /* état caché */

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility 0s linear .3s;

    transition-behavior: allow-discrete;
}

/* état visible */
.tooltip:hover .tooltiptext,
.tooltip:focus .tooltiptext {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility 0s;
}


input[type="checkbox"]:focus-visible+label,
label:has(+input[type="checkbox"]:focus-visible),
*:focus-visible {


    outline-offset: 3 px;

    border-radius: var(--border-radius);

}



.button.colored {

    background: #a7d1ed98;

}

.button.menu-button {
    padding: var(--menu-padding);
    margin: 0;
}

.button.transparent {
    background: transparent;
    backdrop-filter: none;
    border: 1px solid var(--away);
}

.button.simple {
    font-size: .8rem !important;
    text-transform: none;
    font-family: "Helvetius";
    font-variant-numeric: normal;
    font-size: inherit;

}

.button.simple.sc,
.sc {
    font-variant-caps: all-small-caps;


}




.sky:not(.hover) {
    background-repeat: repeat-x;
    animation: animatedBackground 190s linear infinite alternate;
    color: rgba(255, 255, 255, 0) !important;
    background-size: 100%;
    background-clip: text;
    background-color: black;

}

.sky:not(.sunny):not(.cloudy):not(.rainy):not(.stormy) {
    background-image: url("../images/ciels/sunny.webp");
}

.sky.hover {
    background-size: 0;
}

.sky.hover:hover {
    background-size: 100vh;
    background-repeat: repeat-x;
    animation: animatedBackground 90s linear infinite alternate;
    color: transparent;

    background-clip: text;
}

.sunny {
    background-image: url("../images/ciels/sunny.webp");
}

.cloudy {
    background-image: url("../images/ciels/cloudy.webp");
}

.rainy {
    background-image: url("../images/ciels/rainy.webp");
}

.stormy {
    background-image: url("../images/ciels/stormy.webp");
}




.subtitle {
    padding: var(--button-paddings);

    transition: all calc(var(--animation-duration) /3) var(--animation-easing);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--near);

    font-family: "Helvetius";
    font-variant-numeric: normal;

    display: inline-block;
    border: 1px solid var(--away);
    user-select: none;


}

.caption {
    font-size: var(--caption);
    margin-inline: auto;
    margin-top: .5lh;
    text-align: center;

    max-width: 60ch;

}


.button:hover {

    text-decoration: none !important;
    border: 1px solid var(--away);

}

.button.transparent:hover {}




.quicklinks li {

    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    width: max-content;
    border-radius: var(--border-radius);


    &:hover {
        outline: 1px solid var(--away);

    }

}



.quicklinks a.quicklink {
    background-color: var(--far-away);
    padding: var(--button-paddings);
    color: var(--near);

    text-decoration: none;

    width: fit-content;

    transition: all calc(var(--animation-duration) / 2) var(--animation-easing);



}

.icn {
    display: none;
    font-family: "MediaPoint";
    line-height: 0;
    transition: all calc(var(--animation-duration) / 2) var(--animation-easing);
}

a:has(>.hidden.icn) {
    display: flex;
    transition: all calc(var(--animation-duration) / 2) var(--animation-easing);
    align-items: baseline;
    gap: 0;


}

a:has(>.hidden.icn):hover {
    cursor: pointer;
    gap: .5rem;
}


.hidden.icn {
    width: 0;
    opacity: 0;
}

*:hover>.icn {
    width: 1rem;
    opacity: 1;

}

section.related:has(.smaller) {
    padding-block: var(--bm);
    max-width: var(--max-width);
    margin-left: var(--article-margin);

    .title {
        display: flex;
        justify-content: space-between;
        margin: var(--bm);
    }
}


.related-wrapper {

    span.date {
        text-wrap: balance;
        text-align: center;
        width: 100%;


    }

}


.swiper-relation.swiper .swiper-slide {
    margin-inline: calc(var(--gap) /4);


}

.swiper-relation.swiper div.swiper-slide:first-of-type {
    margin-left: 0;

}







.graduate-element,
.space-element {
    overflow: hidden;

    position: relative;
    padding: 0 !important;



    &:hover h3 {
        scale: 1.01;
        ;
    }

    figure {
        position: relative;



        picture {
            display: flex;
            width: 100%;
            aspect-ratio: 4/3 !important;



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




    span.space-title {
        position: absolute;
        z-index: 200;
        opacity: 1;
        margin: var(--bm);
        box-sizing: border-box;
        top: 0;
        text-align: center;
    }

    h3 {
        opacity: 0;
        position: absolute;
        top: calc(var(--bm) * .5);
        left: calc(var(--bm) * .5);
        background-color: black;
        color: white;
        width: calc(100% - var(--bm) * 1) !important;
        height: calc(100% - var(--bm) * 1);
        padding: var(--bm);
        font-size: var(--font-away);
        border-radius: var(--border-radius);
        transition: opacity 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-self: start;
        align-items: center;


        transition: all calc(var(--animation-duration) / 2) var(--animation-easing);

        span {
            text-align: center;
        }

        div.title {
            display: flex;
            flex-direction: column;

        }



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

    }

    &:hover h3 {
        opacity: 1;
    }


    @media (width < 960px) {

        h3 {

            div.title {
                font-family: "Futura Stencil";
                text-transform: uppercase;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                gap: var(--bm);

                >* {
                    background-color: black;
                    padding: var(--button-paddings);
                    border-radius: var(--border-radius);
                    font-size: var(--small-fs);
                }

            }

            opacity: 1;
            background-color: rgba(255, 255, 255, 0) !important;

            >.sky {
                color: white !important;
            }

            .bottom>* {
                background-color: black;
                padding: var(--button-paddings);
                border-radius: var(--border-radius);
            }
        }
    }

}







ul.related a {
    transition: all calc(var(--animation-duration) / 2) var(--animation-easing);



    &:hover {
        text-decoration: none !important;

        h3 {

            text-decoration: underline;
            text-underline-offset: .2em;
            text-decoration-thickness: .01em;
        }
    }




    span.tags {
        font-family: "Futura Stencil";
        text-transform: uppercase;
        align-content: space-around;
        align-items: start;
        align-self: anchor-center;
        margin-top: auto;


    }

    span.date {
        font-size: .8rem;
    }


}

ul.related .title-element {
    width: max-content;
    border: 1px solid var(--away);
    border-radius: var(--border-radius);
    color: var(--near);
    aspect-ratio: 5/3;
    padding: .5rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all calc(var(--animation-duration) / 2) var(--animation-easing);
    display: flex;
    flex-direction: column;
    width: 30vw;
    align-items: center;
    justify-content: space-between;

    h3 {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &:hover {


        a {
            text-decoration: none !important;

        }

    }
}



ul.related ul.related .title-element h3 {
    text-align: left;
    font-family: '';
    /* font-size: 1.5rem; */


}



.bounce.card {

    margin-inline: auto;
    max-width: var(--max-width-big);


    padding: var(--bm);
    margin-block: var(--gap);

    >* {
        font-size: var(--fs-big);

    }

    a:not(.inline) {
        text-decoration: none;
        color: var(--near);
        transition: all calc(var(--animation-duration) / 2) var(--animation-easing);
        border-radius: var(--border-radius);
        vertical-align: center;
        padding: var(--button-paddings);
        font-family: "Futura";
        text-transform: uppercase;
        font-size: var(--button-font-size);
        background-color: white;
        filter: invert(1);
    }

    a.flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap);
    }
}

.cards-group {
    margin-block: var(--bm);

    section.title-card {
        display: flex;
        justify-content: space-between;
        margin: var(--bm);

        a:hover {
            text-decoration: none;
        }

        section.left {
            display: flex;
            gap: calc(var(--gap) / 3);
            align-items: center;
        }
    }

    h3:has(+.smaller) {
        padding-inline: var(--bm);
    }

    .cards {
        /* display: flex;
        gap: calc(var(--gap) /2); 
        flex-direction: row;
        */
        width: calc(100% + var(--bm) * 2);
        left: calc(var(--bm) * -1);
        position: relative;
        padding-inline: calc(var(--bm) * 2);



        &.smaller {

            flex-wrap: wrap;
            gap: calc(var(--gap) /3);
            padding-block: var(--bm);
            display: flex;
            align-items: center;
            flex-direction: row;

            .card {

                width: fit-content;
                aspect-ratio: auto;
                padding: var(--button-paddings);
                transition: transform calc(var(--animation-duration)) var(--animation-easing);

                &:first-of-type {
                    margin-left: 0;
                }

                &.black {
                    background-color: var(--near);
                    color: white;
                }

                &:hover {

                    /* color: transparent;
                    background-repeat: repeat-x;
                    animation: animatedBackground 190s linear infinite alternate;
                    background-image: url("../images/clouds-background.webp");
                    color: rgba(255, 255, 255, 0);
                    background-size: 100%;
                    background-clip: text;
 */
                    outline: 1px solid var(--away);

                    &::before {
                        /* z-index: -1;

                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgb(0, 0, 0); */

                    }
                }
            }
        }

        &.bigger {
            /* overflow-x: scroll; */
            /* scroll-snap-type: x mandatory; */

            .card {

                width: 50vw;

                max-width: var(--max-width);
                flex-shrink: 0;
                /* scroll-snap-align: center; */
            }
        }

        &.medium {


            /* overflow-x: scroll;
            scroll-snap-type: x mandatory; */

            .card {
                height: auto;
                width: 30vw;
                gap: 1lh;
                flex-shrink: 0;
                /* scroll-snap-align: center; */
            }
        }

        &.wider {

            .card:last-child {
                /* margin-right: 30vw !important; */
            }
        }



        &.black {
            background-color: var(--black);


            .card {
                background-color: black;
                color: white;
                border: none;

                h3,
                .discrete {
                    color: white;
                }
            }
        }
    }

    .card.news {
        background-color: black !important;
        color: white;
        border: none;

        h3,
        .discrete {
            color: white;
        }
    }

    .card {

        border-radius: var(--border-radius);
        padding: var(--bm);
        width: 100%;
        box-sizing: border-box;


        aspect-ratio: 4/2;

        display: flex;
        flex-direction: column;
        transition: all calc(var(--animation-duration) / 2) var(--animation-easing);

        &.screen {
            aspect-ratio: 4/3 !important;
        }

        &:first-of-type {
            /* margin-left: var(--bm); */
        }

        &.center {
            text-align: center;
        }



        >*.center {
            text-align: center;
        }

        &.flex {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        h3,
        .discrete {
            width: 100%;
            border-bottom: 0;


            text-wrap: balance;
        }

        >*:hover {
            text-decoration: none !important;
        }

        &.animated:hover {


            --chamfer: 8px;
            --notch-pos: 67%;
            --notch-depth: 10px;
            --notch-width: 12px;

            clip-path: polygon(var(--chamfer) 0,
                    calc(100% - var(--chamfer)) 0,
                    100% var(--chamfer),
                    100% var(--notch-pos),
                    calc(100% - var(--notch-depth)) calc(var(--notch-pos) + var(--notch-width)),
                    100% calc(var(--notch-pos) + var(--notch-width)),
                    100% calc(100% - var(--chamfer)),
                    calc(100% - var(--chamfer)) 100%,
                    var(--chamfer) 100%,
                    0 calc(100% - var(--chamfer)),
                    0 calc(var(--notch-pos) + var(--notch-width)),
                    var(--notch-depth) calc(var(--notch-pos) + var(--notch-width)),
                    0 var(--notch-pos),
                    0 var(--chamfer));


            scale: 0.98;

            h3,
            .discrete {}

        }

        &.border {
            border: 1px solid var(--away);
        }

        &.away {
            background-color: var(--far-away);
        }

        &.sky:hover>a>h3 {

            background-repeat: repeat-x;
            animation: animatedBackground 190s linear infinite alternate;
            background-image: url("../images/clouds-background.webp");
            color: rgba(255, 255, 255, 0);
            background-size: 100%;
            background-clip: text;

        }

        >span.margin {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1lh;
        }
    }
}


.away {
    background-color: var(--far-away) !important;
}



@media (width < 960px) {


    :root {
        --gap: .5rem;
        --bm: .4rem;
        --caption: 1rem;
        --small-fs: 3.2vw;
        --article-margin: 0vw;
        --medium-fs: 4.5vw;
        --big-fs: 6vw;
        --fs: 5.3vw;
        --huge-fs: calc(var(--big-fs) * 1.2);
        --line-height: 1.3;
    }


    /* body,
    main {
        overflow-x: hidden;
    } */




    .small,
    .fs-small,
    .small>*,
    .fs-small>*,
    .mobile-fs-small {
        font-size: var(--small-fs)
    }

    h1,
    .fs-big>p,
    .fs-big {
        font-size: var(--big-fs)
    }

    h1 {
        font-size: var(--big-fs)
    }

    p,
    span,
    h2,
    h3,
    a,
    li {
        line-height: var(--line-height);
        font-size: var(--fs);
    }

    section.title-card,
    section.title-card h3,
    section.title-card * {
        font-size: calc(var(--fs) / 1.2) !important;
    }

    .mediapoint {
        font-size: var(--small-fs) !important;

    }


    .sky {

        background-repeat: repeat-x !important;
        animation: animatedBackground 190s linear infinite alternate !important;
        color: rgba(255, 255, 255, 0) !important;
        background-size: 200% 100% !important;
        background-clip: text !important;
        background-color: black !important;

    }



    .mobile-hidden {
        display: none;
    }

    .mobile-visible {
        display: block !important;
    }




    .swiper-relation {
        .swiper-wrapper {

            width: 100%;

            position: relative;
            margin-inline: calc(50% - 50vw);
            padding-inline: calc(var(--bm) * 2);

            &:has(:only-child) {
                /* padding-inline: 0;
                margin-inline: 0;
                width: calc(100% - var(--bm)); */
            }
        }

    }


    .cards-group {
        margin-top: var(--bm);

        section.title-card {

            line-height: 1;
            display: flex;
            justify-content: space-between;
            margin: var(--bm);
            font-size: var(--fs);
            margin-bottom: .5lh;

            >* {
                line-height: 1
            }

            a:hover {
                text-decoration: none;
            }
        }




        .cards:has(:only-child) {


            .card:only-child {
                width: 100%;
            }
        }

        .cards-group,
        .cards,
        .cards.bigger {

            overflow-x: auto;

            .card {
                width: 85vw;

                height: fit-content;
                overflow-x: scroll;
                scroll-snap-type: x mandatory;



                flex-shrink: 0;
                scroll-snap-align: center;

                /* min-height: 10lh; */
            }
        }


        .cards {

            &.smaller {
                flex-wrap: wrap;
                gap: var(--gap);
                padding-block: var(--bm);


                .card {
                    line-height: 1;
                    min-height: 1lh;
                    width: fit-content;
                    height: fit-content;

                    overflow-x: scroll;
                    scroll-snap-type: x mandatory;

                    flex-shrink: 0;
                    scroll-snap-align: center;

                }
            }
        }
    }




    .related {

        width: 100% !important;

        .cards-group {
            & .cards {
                &.smaller {
                    width: 100%;
                }
            }
        }
    }




    .related-wrapper {

        & span.date,
        & span.time {
            text-wrap: balance;
            text-align: center;
            width: 100%;
            font-size: var(--medium-fs);
        }
    }



}




/* @media (width < 1360px) {}

@view-transition {
    navigation: auto;
} */