body{
    margin: 0;
    height: 100vh;
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #0d0d0d;
}










.text-container{
    display: grid;
    position: fixed;
    height: 100vh;
    grid-template-columns: 400px 1fr;
    grid-template-rows: 4fr 200px;
    grid-template-areas: 
        "blank-space001 blank-space001"
        "main-text blank-space002";
}
#blank-space001{
    display: flex;
    grid-area: blank-space001;
}
#blank-space002{
    display: flex;
    grid-area: blank-space002;
}
#main-text{
    display: flex;
    grid-area: main-text;
    background: #ffffff;
    border-radius: 0px 4px 0px 0px;
    height: 100%;
    width: 100%;
    padding: 2em;
    padding-bottom: 2em;

    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}










.img-container{
    margin: 3vw;
    padding-bottom: 3vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1vw;
    grid-template-areas: 
        "img011 img012 img013 img014"
        "img021 img022 img023 img024"
        "img031 img032 img033 img034"
        "img041 img042 img043 img044";
}
.grid-item{
    width: 100%;
    height: 100%;
}

#img011{
    grid-area: img011;
}
#img012{
    grid-area: img012;
}
#img013{
    grid-area: img013;
}
#img014{
    grid-area: img014;
}
#img021{
    grid-area: img021;
}
#img022{
    grid-area: img022;
}
#img023{
    grid-area: img023;
}
#img024{
    grid-area: img024;
}
#img031{
    grid-area: img031;
}
#img032{
    grid-area: img032;
}
#img033{
    grid-area: img033;
}
#img034{
    grid-area: img034;
}
#img041{
    grid-area: img041;
}
#img042{
    grid-area: img042;
}
#img043{
    grid-area: img043;
}
#img044{
    grid-area: img044;
}










/* RESPONSIVE GRID */

@media only screen and (max-width: 759px){
    .img-container{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas: 
        "img013 img014"
        "img031 img012"
        "img022 img024"
        "img023 img033"
        "img011 img034"
        "img032 img021"
        "img042 img043"
        "img041 img044";
    }
}
@media only screen and (max-width: 36em){
    .text-container{
        width: 100vw;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 200px 0fr;
        grid-template-areas: 
            "blank-space001"
            "blank-space001"
            "main-text"
            "blank-space002";
    }
}