* {
    margin: 0;
    box-sizing: border-box;
}
:root {
    --color_bg: #f3fcf6;
    --color_th: #87998b;
    --color_bg_font: #34562b;
    --color_th_font: #454645;
    --color_hover_font: hsl(147, 53%, 39%);
    --color_hover: #33340C;
}
.quattrocento-regular {
  font-family: "Quattrocento", serif;
  font-weight: 400;
  font-style: normal;
}
.grid_container {
    display: grid;
    grid-template-rows: 15dvh 33dvh 3dvh 49dvh;
    grid-template-columns: 100dvw;
    grid-template-areas: 
        "header"
        "search"
        "btnGroup"
        "adresses";
}
.modal {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.btnGroup {
    grid-area: btnGroup;
}
.header {
    grid-area: header;
}
.adresses {
    grid-area: adresses;
    
}
.search {
    grid-area: search;
}

@media only screen and (max-width: 576px) {
    .grid_container {
        grid-template-rows: 8dvh 32dvh 3dvh 57dvh;
    }
}