@charset "UTF-8";


body{
    height: 100vh;
    width: 100vw;
    padding: 0px 0px 0px 0px;
}

main.grid-container{ /*CONTAINER*/
    width: 1000px;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
}

main.grid-container > header{
    margin: 0px;
    margin: auto;
    width: 50%;
}

.grid-container  h1{
    font-size: 2.4em;
    margin: 0px;
    margin-bottom: 3%;
}

.container-2{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto 30px auto;
    column-gap: 30px;
}

.container-2 > .grid-item{ /*GRID ITEMS*/
    margin-bottom: 0%;
    width: 350px;
    height: 220px;
    padding: 25px 25px 0px 25px;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.267);
}

.container-2  h1{
    color: var(--veryDarkBlue);
    font-weight: 600;
    font-size: 1.3em;
}

#item-1{
    grid-column: 1/2;
    grid-row: 1/4;
    margin: auto;
}
#item-2{
    grid-column: 2/3;
    grid-row: 1/2;
}
#item-3{
    grid-column: 2/3;
    grid-row: 3/4;
}
#item-4{
    grid-column: 3/4;
    grid-row: 1/4;
    margin: auto;
}

.grid-item > img{
    float: right;
    margin-top: 5%;
}