@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@100;300;400&family=Nunito:wght@400;700&display=swap');

* {
        box-sizing: border-box;
}

/* LAYOUT */
body {
        background-color: #fff;
        color: #2e2611;
        display: grid;
        grid-template-rows: 450px 1fr 450px 50px;
        min-height: 100vh;
        font-size : 16px;
        line-height: 1.2;
        font-family : Nunito, Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-weight: 400;
        margin:0;
        text-align: center;
}
footer {
        background-color: #2e2611;
        color: #fff;
        font-size: 14px;
}

section {
        margin: 60px 0;
}


/* TYPO */
h1, h2, h3 {
        font-family: "Archivo Black", sans-serif;
        font-weight: 300;
}

h4, h5, h6 {
        font-family: "Archivo", sans-serif;
        font-weight: 300;
        letter-spacing: 1px;
}

h1 {
        font-size: 105px;
        margin: 0;
}
h2 {
        margin: 0;
        font-size: 30px;
}
h3 {
        font-size: 32px;
}

h4 {
        font-size: 22px;
}

p {
        margin: 16px 0;
}
p.lead {
        font-size: 20px;
}

a {
        color: #000;
}

/* MAIN HEADER */
.main-header {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: flex-start;
        color: #eee;
        background: url('../gfx/header-image.jpg') center center no-repeat transparent;
        background-size: cover;
        padding-top: 50px;
}
.main-header .lead {
        margin: 0;
}
.main-header .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
}
.main-header img {
        height: 100px;
        width: auto;
}

/* TILE */
.tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
}
.tile-image {
        border: 4px solid #000;
        border-radius: 50%;
        width: 250px;
        height: 250px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
}
.tile-image img {
        width: auto;
        height: 100%;
}

#map {
        background-color: #eee;
        height: 100%;
        width: 100%;
}
/* TABLET */
@media screen and (max-width: 1200px) {
        .tile-image {
                width: 150px;
                height: 150px;
        }
}
/* MOBILE */
@media screen and (max-width: 767px) {
        h1 {
                font-size: 70px;
        }

        .tile {
                flex-direction: row;
                text-align: left;
                gap: 20px;
        }

        section {
                margin: 40px 0;
        }
}