/* About Page */
.about-content {
    padding               : 3rem var(--side-padding) 1rem;
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : var(--grid-gap);
    position              : relative;
    grid-template-areas   : "portrait portrait portrait portrait portrait portrait portrait portrait" "text text text text text text text text";
    align-items           : start;

    @media (width > 500px) {
        grid-template-areas : "portrait portrait portrait text text text text text";  
    }

    @media (width > 700px) {
        grid-template-areas : "portrait portrait portrait portrait portrait portrait text text text text text text";
    }

    @media (width > 1000px) {
        padding-top : 5rem;
    }

}
.about-portrait {
    grid-area : portrait;
    @media (width > 500px) {
        position : sticky;
        top : 5rem;
    }
}
.about-texts {
    grid-area             : text;
    display               : grid;
    grid-template-columns : subgrid;
    padding-bottom        : 8rem;
    @media (width > 500px) {
        padding-top : 8rem;
    }
}
.about-intro-big {
    grid-column : 1 / span 8;
    @media (width > 500px) {
        grid-column : 1 / span 4;
    }
}
.about-intro-small {
    grid-column : 1 / span 8;
    font-size   : 0.75em;
    @media (width > 500px) {
        grid-column : 1 / span 4;
    }
}
.about-sections {
    grid-column : 1 / span 8;
    @media (width > 500px) {
        grid-column : 2 / span 4;
    }
}
.about-section {
    padding-top : 4rem;
    @media (width > 500px) {
        padding-top : 7rem;
    }
}
.about-section-title {
    font : var(--font-small);
}