.grid-container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-auto-rows: minmax(7em, auto);
    grid-template-areas:
    "icon nav"
    "image1 text1"
    "text2 image2"
    "image3 text3"
    "footer footer";
}

.grid-icon{
    grid-area: icon;
    font-family: lust,serif;
    font-weight: 700;
    font-size: 1.5em;
    display: flex;
    align-items: flex-end;
}

.grid-icon a:hover{
    color: #99DA7F
}

.grid-nav{
    grid-area: nav;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    justify-content: space-between;
    padding-left: 5%;
}


.grid-text1{
    grid-area: text1;
    padding-top: 44.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.grid-image1 h1{
    padding-bottom: 4.5%;
}

.grid-image1{
    grid-area: image1;
    padding-top: 20%;
    padding-bottom: 10%;
}

.grid-text2{
    grid-area: text2;
    padding-top: 7%;
}

.grid-image2{
    grid-area: image2;
    padding-bottom: 10%;
}

.grid-text3{
    grid-area: text3;
    padding-top: 7%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.grid-image3{
    grid-area: image3;
}

.grid-footer{
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

img{
    height: 24.5em;
}


.frame{
    background-color: #99DA7F;
    padding: 1%;
    position: relative;
    width: 32.5em;
}

.keywords{
    font-family: lust,serif;
    font-weight: 700;
    font-size: 1.5em;
    font-style: normal;
    display: flex;
    justify-items: flex-end;
    padding-right: 5%;
    gap: 4%;
}

