* {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color1: #f1dec0;
    --color2: #525e75;
    --color3: #78938a;
    --color4: #92b992;
    --color3_2: #92778d;
    --color3_3: #927c77;
    --text_color: rgb(227, 226, 241);
    --color1_darker: #9a8e7b;
}

.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 30dvh min-content auto;
    grid-template-areas: 
        "gallery_container",
        "navbar",
        "main";
}

.gallery_container {
    position: sticky;
    top: 0;
    left: 0;
    grid: "gallery_container";
    background-color: var(--color4);
    z-index: 1;
    overflow: hidden;
}
.navbar {
    position: sticky;
    top: 30dvh;
    grid: "navbar";
    background-color: var(--color3);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    z-index: 1;
}
.main {
    grid: "main";
    margin: 4dvh 15dvw 4dvh 15dvw;
    padding: 5%;
    gap: 5%;
    border-radius: 1%;
}
section {
    columns: 2;
    margin-bottom: 5dvh;
    align-content: center;
}
footer {
    margin-top: 10dvh;
    padding: 3% 1% 3% 1%;
    background-color: inherit;
    filter: brightness(0.8);
}


@media only screen and (max-width: 576px) {
    section {
        columns: 1;
    }
    .container {
        grid-template-columns: auto;
        grid-template-rows: 15dvh min-content auto;
    }
    .navbar {
    top: 15dvh;
}
.main {
    margin: 4dvh auto 4dvh auto;
    width: 87%;
}
section {
    margin-bottom: 0.5dvh;
}
footer {
    margin-top: 2dvh;
    padding: 3% 1% 3% 1%;
}
    
    
}