/* HOMEPAGE */
/******************/

#site-wrapper.homepage-wrapper {

    display: flex;
    flex-flow: column nowrap;
    max-height: 100vh;
    height: 100%;
    /* border: 1px solid red; */
    justify-content: stretch;

}

#site-main.homepage-main {

    height: 90%;
    flex: auto 6 1;
}

#site-main.homepage-main article {

    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    /* border: 1px solid teal; */
}


#home_project-menu-grid {

    --menu-width: min(calc(100cqw + 1rem), 100cqh);

    position: relative;
    display: flex;
    flex-flow: row wrap;
    /* align-items: flex-start; */

    width: 100%;
    height: 60%;
    margin-top: 1rem;
    flex: 50% 2 1;
    gap: calc(var(--unitC) / 2);
    
    padding: 1rem;
    
    & .project-tile {

        /* padding: calc(0.2 * var(--unitA)); */
        padding: calc(0.02 * var(--unitA));
        flex: auto 2 1;
        color: #eff1ea;
        justify-content: stretch;
        width: 1fr;
        min-width: 30%;
        height: 1fr;
        /* height: 60cqh; */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

#home_project-menu-grid .project-tile .project-link {

    display: block;
    width: 100%;
    height: 100%;
    /* background-color: rgb(225, 244, 244); */
    /* background-color: rgb(38, 49, 49); */
    border-radius: 1.5px;
    font-family: 'Articulat-CF', sans-serif;
    padding: 1rem;
    outline: 1px solid #68b2f8;

    &:hover {

        background-color: rgba(25, 29, 30);
    }
}

.splash-messaging {

    display: block;
    position: relative;
    width: auto;
    height: auto;
    flex: auto 0 3;
    padding: 1rem 1rem;
}

.splash-messaging span {

    font-family: 'Argent-CF', serif;
    font-size: calc(calc(var(--unitB) + var(--unitA)) - var(--unitC));
    font-weight: 300;
    letter-spacing: -3%;
    color: #68b2f8;
}




/* MEDIA QUERIES FOR THIS SET OF RULES */
@media screen and (min-width: 2400px) {


}

@media screen and (max-width: 1200px) {
    

    .splash-messaging span {

        font-size: var(--unitB);
    }

}
@media screen and (max-width: 800px) {

    .splash-messaging span {

        font-size: var(--unitB);
    }

    #home_project-menu-grid {

        flex-flow: column nowrap;
        flex: 50% 4 1;

        & .project-tile {

            max-width: 100%;
        }
    }

}
@media screen and (max-width: 600px) {

    .homepage-main article {

        padding-right: 1rem;
    }

    .splash-messaging span {

        font-size: var(--unitC);
    }
}
@media screen and (max-width: 400px) {


}
@media screen and (max-width: 240px) {


}