/*
font
ProximaNova Regular = Lato Regular 400
Futura Bold = Nunito Sans Bold 700
Futura medium = Nunito Sans Regular 400
AmbroiseStd Regular = Didot
Calluna Bold Italic = Crimson Pro Bold 700 italic
Calluna Italic = Crimson Pro Regular 400 italic


Font
Lato Regular 400
Nav : 18pt              1.12em
Content: 16pt           1em
Content  menus: 18pt   1.12em
Content  story: 24pt   1.5em

Nunito Sans Bold 700
Banner top: 18pt        1.12em  1.4em

Nunito Sans Regular 400
First Title: 36pt       2.25em
Second Title: 28pt      1.75em
Fourth title: 48pt      3em


GFS Didot
Banner mid: 60pt        3.75em

Crimson Pro Bold 700 italic
Banner bottom: 18pt     1.12em
Footer-title: 16pt      1em

Crimson Pro Regular 400
Footer-content: 16pt    1em

Poppins Regular
Button: 20pt            1.25em

font-family: 'Crimson Pro', serif;
font-family: 'GFS Didot', serif;
font-family: 'Lato', sans-serif;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Poppins', sans-serif;
*/

@green: #4d8c57;

#home-cooking {
    text-align: center;
    min-height: max-content;
    .title {
        font-size: 2.25em;
    }
}

#homestyle {
    color: white;
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 10rem;

    .image {
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .right {
        padding-top: 3rem;
/*        position: relative;*/
    }
    .title {
        font-size: 1.75em;
    }

    .content {
        margin-bottom: 10%;
    }
    .socials {
/*        position: absolute;*/
/*        left: 50%;*/
/*        transform: translateX(-50%);*/
        text-transform: uppercase;
        font-size: 1.3em;
        width: 350px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
        padding: 1rem 1.5rem;
        border: 7px solid white;
        border-radius: 58px;
        img {
            height: 46px;
        }
    }
}
#content-wemenu {
    .content .row {
        margin-bottom: 6rem;
        img {
            height: auto;
        }
    }
}
#our-story {
    text-align: center;
    .title {
        font-size:3.5em;
/*        font-family: 'futuraMedium';*/
    }
    .content {
        margin-bottom: 4rem;
        font-size: 1.5em;
    }
}
#galleries {
    .photos {
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
    #photo- {
        &1 {
            grid-area: top-left;
        }
        &2 {
            grid-area: top-middle;
        }
        &3 {
            grid-area: right;
        }
        &4 {
            grid-area: bottom;
        }
    }
    .photos-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 300px);
        grid-gap: 15px;
        grid-template-areas:
            "top-left top-middle right"
            "bottom bottom right"
            "bottom bottom right"
        ;
        margin-bottom: 5rem;
    }
}
@media only screen and (max-width: 1199px) {
    #homestyle {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    #content-wemenu .content .row {
        margin-bottom: 3rem;
    }
    #our-story .content {
        margin-bottom: 3rem;
    }
    #galleries .photos-wrapper {
        grid-template-rows: repeat(3, 200px);
        margin-bottom: 4rem;
    }
}
@media only screen and (max-width: 991px) {
    #homestyle {
        .left img {
            width: 300px;
        }
    }
    #homestyle .socials {
        width: 350px;
    }
    #galleries .photos-wrapper {
        grid-template-rows: repeat(3, 140px);
    }
}
@media only screen and (max-width: 575px) {
    #home-cooking {
        .title {
            font-size: 1.4em;
        }
    }
    #homestyle {
        padding-top: 2rem;
        padding-bottom: 2rem;
        .right {
            padding-top: 2rem;
        }
        .title {
            font-size: 1.2em;
        }
        .content {
            margin-bottom: 1rem;
        }
        .socials {
            padding: 0.5rem 1rem;
            width: 230px;
            img {
                height: 26px;
            }
        }
    }
    #content-wemenu {
        img {
            margin-bottom: 0.5rem;
        }
        .content .row {
            margin-bottom: 1rem;
        }
    }
    #our-story {
        .title {
            font-size: 1.7em;
        }
        .content {
            font-size: 1.2em;
            margin-bottom: 1rem;
        }
    }
    #galleries .photos-wrapper {
        grid-template-rows: repeat(3, 60px);
        margin-bottom: 1rem;
    }
}