#about-page {
    -webkit-mask:
        linear-gradient(to bottom,
            transparent 0,
            transparent 60px,
            #000 100px
        )
    ;
    mask:
        linear-gradient(to bottom,
            transparent 0,
            transparent 60px,
            #000 61px
        )
    ;
    z-index: 10;
    padding-top: var(--size-xl);
    padding-bottom: 35dvh;
    row-gap: var(--size-l);
}


/* 
Slideshow 
*/
#about_p-slideshow {
    min-width: 100vw;
    max-width: 100vw;
    scroll-snap-type: x mandatory;
    z-index: 0;
}

.about_p-slideshow-item {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    scroll-snap-align: center;
    opacity: .6;
}


/*
Section
*/
.about_p-section {
    position: relative;
    max-width: 40rem;
    margin: 0 auto;
    row-gap: var(--size);
    z-index: 10;
}

#about_p-team {row-gap: var(--size-l);}

.about_p-team-member {transition: opacity 500ms;}
.about_p-team-member.--alpha {opacity: .4;}

.about_p-team-member .--marker {
    top: 50%;
    left: -1.7rem;
    transform: translateY(calc(-50% - 1px));
    width: .7rem;
    height: .7rem;
    background: var(--c-red);
    opacity: 0;
    transition: opacity 500ms;
}
/* .about_p-team-member:not(.--alpha) .--marker {opacity: 1;} */

.about_p-team-member > div {
    width: fit-content;
    margin: .75rem 0;
}




@media only screen and (min-width: 768px) {
    #about-page {
        padding: var(--size);
        justify-content: center;
        -webkit-mask:
            linear-gradient(to bottom,
                transparent 0,
                transparent 100px,
                #000 160px,
                #000 calc(50dvh - 92px),
                transparent calc(50dvh - 32px),
                transparent calc(50dvh + 32px),
                #000 calc(50dvh + 92px),
                #000 calc(100dvh - 150px),
                transparent calc(100dvh - 90px),
                transparent 100dvh
            )
        ;
    
        mask:
            linear-gradient(to bottom,
                transparent 0,
                transparent 100px,
                #000 160px,
                #000 calc(50dvh - 92px),
                transparent calc(50dvh - 32px),
                transparent calc(50dvh + 32px),
                #000 calc(50dvh + 92px),
                #000 calc(100dvh - 150px),
                transparent calc(100dvh - 90px),
                transparent 100dvh
            )
        ;
    }

    #about_p-intro {
        position: fixed;
        top: 1rem;
        left: 50vw;
        transform: translateX(-50%);
    }

    #about_p-team {
        row-gap: var(--size-xl);
        padding: 25dvh 0;
    }

    footer {
        position: fixed !important;
        bottom: 1rem;
        right: 0;
        left: 0;
    }
}




@media (hover: hover) {
    .about_p-team-member {
        transition: opacity 500ms;
    }

    #about_p-team:hover .about_p-team-member {opacity: .4;}
    #about_p-team .about_p-team-member:hover,
    .about_p-team-member:hover .--marker {opacity: 1 !important;}
}