/*CSS document*/

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;}

img {
    width: 100%;
}

div.container {
    background-color: rgb(255, 251, 246);
    margin: auto;
    max-width: 90em;
}

div.home {
    padding-right: 3em;
}

body {
    background-color: rgb(233, 233, 233);
}

header {
    background-color: rgb(195, 206, 166);
    height: 6.3em;
    display: grid;
    grid-template-rows: 2.2em 2em;
}

main {
    padding-bottom: 2em;
}

nav ul {
    padding: 2rem 0.1rem 2rem 3rem;
}

nav ul li {
    display: inline;
    list-style-type: none;
    margin-right: 1rem;
    font-family: forma-djr-display, sans-serif;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}

nav ul li a {
    color: rgb(35, 35, 35);
    text-decoration: none;
}

nav ul li a:hover {
    color: rgb(115, 159, 99);
}

h1 {
    padding: 1.5rem 1rem 1.5rem 3rem;
    width: 10em;
}

h2 {
    margin: 3rem 3rem 1rem;
    color: rgb(35, 35, 35);
    font-family: goldenbook, serif;
    font-weight: 500;
    font-size: 2.75rem;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
}

h3 {
    margin: 3rem 3rem 0.25rem;
    color: rgb(35, 35, 35);
    font-size: 2rem;
    font-family: goldenbook, serif;
    font-weight: 500;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    border-top: solid 0.1rem rgb(35, 35, 35);
}

h4 {
    margin: 0.2rem 1rem 0.25rem;
    color: rgb(35, 35, 35);
    font-size: 1.5rem;
    font-family: goldenbook, serif;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

ul {
    list-style: none;
}

ul.products li {
    margin-bottom: 2rem;
}

ul.products {
    margin: 0em 2rem;
}

p {
    color: rgb(35, 35, 35);
    margin: 0.5rem 1rem 0.5rem;
    font-size: 1rem;
    font-family: forma-djr-display, sans-serif;
    letter-spacing: 0.1rem;
    max-width: 40em;
}

p.top {
    margin: 0.5em 3em 0.5em;
}

p.price {
    font-weight: 600;
}

footer {
    background-color: rgb(195, 206, 166);
    padding: 0.5em 0.5em 0.3em;
}

figure {
    margin-left: 3em;
}

figure.home {
    max-width: 45em;
    padding: 1em 0em;
}

figure.portrait {
    max-width: 70em;
    padding-top: 2em;
    margin-right: 3em;
}

figure.products {
    margin: 1em 1em 0.1em;
    max-width: 30em;
}

figure.location {
    max-width: 70em;
    padding-top: 2em;
    margin-right: 3em;
}

@media screen and (min-width: 60em) {
    ul.products {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3em;
    }

    div.home {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    header {
        grid-template-columns: 12em auto;
        height: 5em;
    }
}