header {
    top: 0;
    right: 0;
    left: 0;
    z-index: 200;
}

@media (hover: hover) {
    header > button {transition: opacity 500ms;}
    header > button:hover {opacity: .4;}
}




#about {
    top: 0;
    right: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 180;
}
#about[data-status="close"] {height: 0;}
@media only screen and (min-width: 768px) {
    #about {
        top: var(--size-s);
        bottom: unset;
        right: var(--size-s);
        left: unset;
        width: 30rem;
    }
}

#about-container {
    min-height: 100%;
    max-height: 100%;
    padding-top: var(--size-l);
    row-gap: var(--size-l);
}

.about-title {
    grid-column: 1/-1;
    margin-bottom: var(--size-s);
}

#about .--contact {row-gap: var(--size-m);}
#about .--phone {grid-column: 1/-1;}

#about-footer {
    margin-top: auto;
    padding-top: var(--size-m);
    align-items: flex-end;
}

#about-footer img {
    width: 6rem;
    opacity: .9;
}

@media (hover: hover) {
    #about-container a {transition: opacity 500ms;}
    #about-container a:hover {opacity: .4;}
}