/**********************************************************************/
/***                        Secondary Header                        ***/
/**********************************-***********************************/


.about-container .secondary-header {
    background-image: linear-gradient(var(--60__overlay), var(--60__overlay)), url('../media/building_in_sky.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 50vh !important;
    background-attachment: fixed;
    top: 0rem;
    left: 0rem;
    color: var(--almost__white);
}

.about-container .secondary-header blockquote {
    font-size: 1.8rem;
    border-left: 0.5rem solid var(--phthalo__green);
}

.about-container .secondary-header figcaption cite {
    font-size: 1.3rem;
}


/**********************************************************************/
/***                         About Stories                          ***/
/**********************************-***********************************/


.about-body {
    margin: 6rem auto;
}

.about-stories {
    color: var(--dark__slate__gray);
    width: 100% !important;
}

.about-stories p,
.about-stories ul {
    font-size: 1.6rem;
    text-align: justify;
}

.about-stories #objective ul {
    margin-left: 1.4rem;
}

.about-stories #objective ul:not(.browser-default) > li {
    list-style-type: disc !important;
    margin-bottom: 0.7rem;
}

.about-stories #objective ul:not(.browser-default) > li:last-child {
    margin-bottom: 0rem;
}

.about-stories #works ul {
    margin-left: 1.4rem;
}

.about-stories #works ul:not(.browser-default) > li {
    list-style-type: disc !important;
    margin-bottom: 0.7rem;
}

.about-stories #works ul:not(.browser-default) > li:last-child {
    margin-bottom: 0rem;
}

.about-stories h2,
.about-stories h3 {
    margin: 3rem 0rem;
}

.about-stories img {
    width: 100%;
    height: auto;
    float: none;
    border-radius: 0.7rem;
    margin: 0.75rem 0rem 1.6rem 0rem;
}

.objective-row {
    display: grid;
    grid-template-columns: 1rem auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        "objc txto";
    width: 100%;
    margin-bottom: 1.2rem;
}

.objective-bullet {
    grid-area: objc;
    background-color: var(--dark__cyan);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    align-self: center;
}

.objective-text {
    grid-area: txto;
    text-align: left;
    padding: 0rem 0rem 0rem 1.5rem;
    margin: 0rem;
}

#works img {
    margin-bottom: 3rem;
}

.howto-row {
    display: grid;
    grid-template-columns: 2.2rem auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        "num txt";
    width: 100%;
    margin-bottom: 1.2rem;
}

.howto-number {
    grid-area: num;
    background-color: var(--dark__cyan);
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    align-self: center;
}

.actual-number {
    font-size: 1.4rem;
    font-weight: 900;
    text-align: center;
    color: var(--almost__white);
    width: 2.2rem;
    height: 2.2rem;
    padding-top: 0.075rem;
}

.howto-text {
    grid-area: txt;
    text-align: left;
    padding: 0rem 0rem 0rem 1.5rem;
    margin: 0rem;
}

.table-of-contents {
    position: fixed;
    margin: 9rem 0rem 9rem 3rem;
}

.table-of-contents a {
    color: var(--dark__slate__gray) !important;
}

.table-of-contents a.active {
    border-left: 0.3rem solid var(--alameda__gray__6);
}

.table-of-contents a:hover {
    border-left: 0.15rem solid var(--alameda__gray__6);
}

.table-of-contents li {
    padding: 0.4rem 0rem;
}

.table-of-contents li a {
    font-size: 1.7rem;
    width: 100%;
}


/**********************************************************************/
/***                         Media Queries                          ***/
/**********************************-***********************************/


/****  screen and (min-width: 768px)  ****/

@media screen and (min-width: 768px) {

    /******************************/
    /****   Secondary Header   ****/
    /******************************/

    .about-container .secondary-header blockquote {
        font-size: 1.9rem;
    }

    .about-container .secondary-header figcaption cite {
        font-size: 1.4rem;
    }

    /***************************/
    /****   About Stories   ****/
    /***************************/

    .about-stories img {
        width: 100%;
        height: auto;
        float: none;
        border-radius: 0.7rem;
        margin: 0.75rem 1.5rem 1.6rem 0rem;
    }

    #works img {
        margin-bottom: 3rem;
    }

}

/****  screen and (min-width: 768px)  ****/


/****  screen and (min-width: 992px)  ****/

@media screen and (min-width: 992px) {

    /***************************/
    /****   About Stories   ****/
    /***************************/

    .about-stories {
        width: 75% !important;
    }

}

/****  screen and (min-width: 992px)  ****/