#about-page > * {grid-column: 1/-1;}


/* 
SLIDESHOWS
*/
/* .about_p-slideshow {
    margin: 0 -1rem;
    min-width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    column-gap: var(--size-s);
    margin-bottom: var(--size-xl);
}

.about_p-slideshow--figure {
    min-width: 66vw;
    max-width: 66vw;
}

@media only screen and (min-width: 768px) {
    .about_p-slideshow--figure {
        min-width: 40vw;
        max-width: 40vw;
    }
}

@media only screen and (min-width: 1096px) {
    .about_p-slideshow {margin-bottom: var(--size-xxl);}
} */



/* 
WHAT WE DO
*/
#about_p-who_we_are {margin-bottom: var(--size-xl);}
#about_p-who_we_are > * {grid-column: 1/-1;}
#about_p-who_we_are article p:not(:last-of-type) {margin-bottom: 1em;}
#about_p-who_we_are article p:nth-of-type(odd) {grid-column: 2/-1;}
#about_p-who_we_are article p:nth-of-type(even) {grid-column: 1/-1;}

@media only screen and (min-width: 768px) {
    #about_p-who_we_are h2 {grid-column: 1/2; grid-row: 1;}
    #about_p-who_we_are article {grid-column: 1/-1; grid-row: 1;}
    #about_p-who_we_are article p:nth-of-type(odd) {grid-column: 2/-1;}
}

@media only screen and (min-width: 1096px) {
    #about_p-who_we_are {grid-column: 3/-3; margin-bottom: var(--size-xxl);}
    #about_p-who_we_are h2 {grid-column: 1/3;}
    #about_p-who_we_are article p:nth-of-type(odd) {grid-column: 3/-1;}
}



/* 
PICTURE
*/
#about_p-picture {margin: 0 -1rem var(--size-xl);}
@media only screen and (min-width: 1096px) {
    #about_p-picture {margin: 0 -1rem var(--size-xxl);}
}



/* 
OUR APPROACH
*/
#about_p-our_approach {margin-bottom: var(--size-l);}
#about_p-our_approach > * {grid-column: 1/-1;}
#about_p-our_approach p {
    margin-top: 1em;
    padding-left: 1em;
}

@media only screen and (min-width: 768px) {
    #about_p-our_approach {margin-bottom: var(--size-xl);}
    #about_p-our_approach h2 {grid-column: 1/3; grid-row: 1;}
    #about_p-our_approach article {grid-column: 3/-1; grid-row: 1;}
    #about_p-our_approach p:first-of-type {margin-top: 0;}
    #about_p-our_approach p {padding-left: 0;}
}

@media only screen and (min-width: 1096px) {
    #about_p-our_approach {grid-column: 3/-3;}
    #about_p-our_approach h2 {grid-column: 1/5;}
    #about_p-our_approach article {grid-column: 5/-1;}
}


/* 
HOW WE WORK
*/
#about_p-how_we_work {margin-bottom: var(--size-l);}
#about_p-how_we_work > * {grid-column: 1/-1;}
#about_p-how_we_work p {
    margin-top: 1em;
    padding-left: 1em;
}

@media only screen and (min-width: 768px) {
    #about_p-how_we_work {margin-bottom: var(--size-xl);}
    #about_p-how_we_work h2 {grid-column: 1/3; grid-row: 1;}
    #about_p-how_we_work article {grid-column: 3/-1; grid-row: 1;}
    #about_p-how_we_work p:first-of-type {margin-top: 0;}
    #about_p-how_we_work p {padding-left: 0;}
}

@media only screen and (min-width: 1096px) {
    #about_p-how_we_work {margin-bottom: var(--size-xxl);}
    #about_p-how_we_work {grid-column: 3/-3;}
    #about_p-how_we_work h2 {grid-column: 1/5;}
    #about_p-how_we_work article {grid-column: 5/-1;}
}




/* 
WHAT WE DO
*/
#about_p-what_we_do {margin-bottom: var(--size-xl);}
#about_p-what_we_do * {grid-column: 1/-1;}
#about_p-what_we_do dt {margin-bottom: 1em;}
#about_p-what_we_do dd:not(:last-of-type) {margin-bottom: var(--size-m);}
#about_p-what_we_do p {margin-top: .25em;}

.about_p-activity[data-status="close"] figure {height: 0;}
.about_p-activity figure {
    overflow-y: hidden;
    margin: 0 -1rem;
}
.about_p-activity img {margin-top: var(--size);}

#about_p-what_we_do-thumb {display: none;}

@media only screen and (min-width: 768px) {
    #about_p-what_we_do dt {grid-column: 1/3;}
    #about_p-what_we_do div {grid-column: 3/-1;}
    .about_p-activity figure {
        width: 50%;
        margin: 0;
    }
}

@media only screen and (min-width: 1096px) {
    #about_p-what_we_do {margin-bottom: var(--size-xxl);}

    #about_p-what_we_do div {
        grid-column: 1/7;
        column-gap: var(--size-m);
        padding-left: var(--size-xl);
    }
    #about_p-what_we_do dd {
        grid-column: span 6;
        margin-bottom: var(--size-l) !important;
    }

    .about_p-activity figure {width: 75%;}

    #about_p-what_we_do-thumb {
        grid-column: 7/-1;
        grid-row: 1/4;
        top: 4rem;
        align-self: flex-start;
        transform: translateX(1rem);
    }

    .about_p-activity figure {display: none !important;}
}

@media (hover: hover) {
    #about_p-what_we_do .about_p-activity {transition: opacity 500ms;}
    #about_p-what_we_do:hover .about_p-activity {opacity: .2;}
    #about_p-what_we_do .about_p-activity:hover {opacity: 1;}
}


/* 
SELECTED PARTNERS
*/
#about_p-selected_partners h3 {grid-column: 1/-1;}
#about_p-selected_partners dl {
    grid-column: span 2;
    margin-top: var(--size-m);
}
#about_p-selected_partners .--sub_title {
    grid-column: 1/-1;
    margin-bottom: .5em;
}
#about_p-selected_partners dd {
    grid-column: 1/-1;
    margin-left: 1rem;
}

@media only screen and (min-width: 768px) {
    #about_p-selected_partners h3 {margin-bottom: var(--size-m);}
    #about_p-selected_partners dl {
        grid-column: span 3;
        margin: 0 0 var(--size-l);
    }

    #about_p-selected_partners .--sub_title {grid-column: 1/3;}
    #about_p-selected_partners dd {grid-column: 2/-1;}
}

@media only screen and (min-width: 1096px) {
    #about_p-selected_partners h3 {grid-column: 3/-1; margin-bottom: var(--size-l);}
    #about_p-selected_partners dl {grid-column: span 3; margin-bottom: var(--size-xl);}
    #about_p-selected_partners .--sub_title {grid-column: 1/6 !important; text-align: right;}
    #about_p-selected_partners dd {grid-column: 6/-1;}
}

@media (hover: hover) {
    #about_p-selected_partners dt,
    #about_p-selected_partners dd {transition: opacity 500ms;}

    #about_p-selected_partners:hover dt,
    #about_p-selected_partners:hover dd {opacity: .2;}

    #about_p-selected_partners dl:hover dt,
    #about_p-selected_partners dd:hover {opacity: 1;}
}