#about-page {
    padding-top: 50dvh;
    row-gap: var(--size_xl);
}
@media only screen and (min-width: 768px) {
    #about-page {row-gap: var(--size_xxxl);}
}

.about_p-section-title {
    column-gap: var(--size_s);
    margin-bottom: var(--size);
}

.about_p-section-title span {
    width: .8rem;
    height: .8rem;
    background: var(--c_black);
}




/* 
MANIFESTO
*/
#about_p-manifesto .b-title {margin: var(--size_m) 0 var(--size);}
#about_p-manifesto article .b-title:first-child {margin-top: 0;}
#about_p-manifesto .b-title span:first-of-type {opacity: var(--alpha);}

@media only screen and (min-width: 768px) {
    #about_p-manifesto article {
        grid-column: 2/-1;
        row-gap: var(--size_m);
    }

    #about_p-manifesto article .b-title {
        grid-column: 1/3;
        margin-top: 0;
    }

    #about_p-manifesto article div,
    #about_p-manifesto article ul {
        grid-column: 3/-1;
        margin-top: 0;
    }
}



/* 
SLIDESHOW
*/
#about_p-slideshow {
    min-width: 100vw;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    column-gap: var(--size_s);
}

#about_p-slideshow > * {
    width: auto;
    height: 50dvh;
    object-fit: cover;
    scroll-snap-align: center;
}




/* 
CONTACTS
*/
#about_p-contacts-container {row-gap: var(--size_m);}
#about_p-contacts-container > * {grid-column: 2/-1;}
@media only screen and (min-width: 768px) {
    #about_p-contacts-container > * {grid-column: 1/-1;}
}



/* 
FORM
*/
#about_p-form .honeypot {position: absolute; left: -9999px;}

#about_p-form {gap: var(--size_xs);}

.about_p-form-field {
    display: flex;
    align-items: start;
    column-gap: var(--size_s);
    padding: 4px 6px;
    grid-column: 1/-1;
    background: var(--c_grey);
}

.about_p-form-field label,
.about_p-form-field button {
    opacity: var(--alpha);
    height: fit-content;
}

.about_p-form-field label abbr {display: none !important;}

.about_p-form-field input {
    background: transparent;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    width: 100%;
}
.about_p-form-field input:focus-visible,
.about_p-form-field textarea:focus-visible {background: var(--c_light) !important;}

.about_p-form-field input[type="checkbox"] {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid var(--c_black) !important;
    opacity: var(--alpha);
    appearance: none;
    background-color: transparent;
    outline: none;
}
.about_p-form-field input[type="checkbox"]:checked {background: var(--c_black);}

.about_p-form-field textarea {
    background: transparent;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    width: 100%;
}
.about_p-form-field textarea::placeholder {color: black; opacity: var(--alpha);}

#about_p-form input[type="submit"] {
    width: fit-content;
    height: fit-content;
    background: var(--c_black);
    color: white;
    border: 0 !important;
    outline: 0 !important;
    padding: 4px 6px;
    border-radius: 0;
}

#info_b-contact-attachment > * {width: 100%;}
#info_b-contact-attachment[data-status="close"] .--list {height: 0;}

@media only screen and (min-width: 768px) {
    #info_b-contact-name,
    #info_b-contact-subject,
    #info_b-contact-attachment,
    #info_b-contact-message {grid-column: 2/-2;}
    #info_b-contact-email {grid-column: 2/4;}
    #info_b-contact-phone {grid-column: 4/-2;}
    #about_p-form input[type="submit"] {grid-column: 2/3;}
}

@media only screen and (min-width: 1096px) {
    #info_b-contact-name {grid-column: 2/4;}
    #info_b-contact-email {grid-column: 4/5;}
    #info_b-contact-phone {grid-column: 5/-2;}

    #info_b-contact-subject {grid-column: 2/4;}
    #info_b-contact-attachment {grid-column: 4/-2;}

    #info_b-contact-attachment .--list {
        position: absolute;
        right: var(--size);
        min-width: calc(calc(calc(100vw - calc(var(--size) * 7)) / 6) + .7rem);
        max-width: calc(calc(calc(100vw - calc(var(--size) * 7)) / 6) + .7rem);
        transform: translateY(calc(-.5rem + 2px));
        background: var(--c_grey);
    }
}

@media (hover: hover) {
    #about_p-contacts a {transition: opacity 200ms ease-in-out;}
        
    #about_p-contacts ul:hover a {opacity: var(--alpha);}
    #about_p-contacts ul a:hover {opacity: 1 !important;}
}