:root {
    --text: #050316;
    --background: #fbfbfe;
    --primary: #b4b7b7;
    --secondary: 64, 64, 64;
    --accent: #92743f;
    --dark: #1f1f1f;
}

*, body {
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
}

.divider {
    height: 325px;
    width: 100%;
    margin: 0;
    overflow-y: hidden;
}

.divider img {
    object-fit: cover;
    object-position: initial;
    height: 100%;
    width: 100%;
}

/* Navigation */
nav {
    background-color: var(--background);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.nav-content{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
}

.logo {
    padding: 2rem 0;
}

nav h1 {
    font-family: 'Playfair Display', serif;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--accent);
}

nav p {
    font-size: 1rem;
    color: var(--text);
    text-align: center;
}

nav a {
    text-decoration: none;
}

.nav-content .links {
    display: flex;
    align-items: center;
    margin-right: .8rem;
}

.links ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
}

nav ul li {
    margin: 0.4rem;
    justify-content: center;
}

#contact {
    text-decoration: underline;
    text-underline-offset: 0.5rem;
}

nav ul li a {
    text-decoration: none;
    color: var(--text);
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
}

nav ul li a:hover {
    text-decoration: underline;
    text-underline-offset: 0.5rem;
}

/* content */
.content-wrap {
    width: 80%;
    margin: 6rem auto;
}

.content {
    font-family: 'Lato', sans-serif;
    font-size: 1.15rem;
    display: grid;
    grid-template-areas: 'contact contact-img'
                         'hours-img hours';
    grid-gap: 1rem;
}

.content h2 {
    font-family: 'Playfair Display', cursive;
    color: var(--accent);
    margin-top: 2.25rem;
}

.content p {
    margin: .7rem 0;
    width: 60%;
}

#contact-info {
    grid-area: contact;
}

#open-hours {
    grid-area: hours;
}



.content img {
    height: 400px;
    width: 750px;
    object-fit: cover;
}


/* Footer */
.footer {
    background-color: rgba(var(--secondary), 0.25);
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    font-family: 'Lato', serif;
    padding: 0  8rem;
}
.footer .contact-info {
    margin: 1rem;
}

.footer .contact-info h2 {
    color: var(--accent);
}

.footer .footer-logo {
    grid-column: 2 / 3;
    text-align: center;
    place-self: center;
}

.footer-logo h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--accent);
}

.footer .hours {
    grid-column: 3 / 4;
    margin: 1rem;
}

.hours h2 {
    color: var(--accent);
}

.hours ul {
    list-style: none;
}

@media (max-width: 1280px) {

    .divider {
        height: 165px;
    }

    .divider img {
        width: inherit;
        height: inherit;
    }

    .nav-content {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        place-items: center;
    }

    .nav-content .logo {
        grid-column: 2 / 4;
    }

    .nav-content .logo h1 {
        font-size: 1.5rem;
    }

    .nav-content .logo p {
        font-size: 0.8rem;
    }

    .nav-content .links {
        grid-column: 1 / 5;
        grid-row: 2 / 3;
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }

    .content-wrap {
        width: 90%;
        margin: 1rem auto;
    }

    .content {
        grid-template-areas: 'hours hours'
                             'contact contact';
        width: 100%;
    }

    .content img {
        width: 350px;
        height: 200px;
        grid-column: span 2;
    }


    .content h2 {
        font-size: 1rem;
    }

    .content p {
        font-size: .8rem;
        margin: 0.5rem 0;
    }

    .footer {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 2fr 3fr;
        grid-template-areas:
                             "hours hours"
                             "contact contact"
                             "logo logo";
        padding: 0;
        place-items: center;
        color: var(--text);
    }

    .footer .contact-info {
        grid-area: contact;
        margin: 0 1rem;
        text-align: center;
    }

    .footer .contact-info h2 {
        font-size: 1.1rem;
    }

    .footer .contact-info p {
        font-size: .9rem;
    }

    .footer .hours {
        margin: 1rem 0;
        grid-area: hours;
        text-align: center;
    }

    .footer .hours h2 {
        font-size: 1.1rem;
    }

    .footer .hours ul li {
        font-size: .9rem;
    }

    .footer .footer-logo {
        grid-area: logo;
        margin: 0;
    }

    .footer .footer-logo h1 {
        font-size: 1.5rem;
    }

    .footer .footer-logo p {
        font-size: .8rem;
    }
}