* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 50%;
    font-size: 2.5em;
    font-weight: bold;
    height: 800px;
    padding: 5px 5px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

body {
    font-family: 'EB Garamond', serif;
    text-align: center ;
}

h1 {
    font-weight: 800;
    font-style: italic;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
    font-weight: bold;
    box-shadow: 10px 10px 10px #414141;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 9px 10px;
    text-decoration: none;
    font-size: 17px;
    /* box-shadow: 10px 10px 10px #2c2c2c; */
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #000000;
    color: white;
}

.column-photo {
    max-width: 100%;
    box-shadow: 5px 5px 10px #acacac;
}

.column-photo-jug {
    max-width: 100%;
    box-shadow: 5px 5px 10px #acacac;
}

.thumbnail {
    padding: 5px;
    width: 300px;
    box-shadow: 5px 5px 10px #acacac;
}

.photo {
    width: 100%;
}

.goods-heading {
    font-weight: bold;
}

.contact {
    text-decoration: none;
}

.list {
    list-style-type: none;
}

.grid-container {
    display: grid;
    grid-template-columns: auto;
    justify-content: start;
    max-width: 1200px;
}

.grid-item {
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

@media (min-width: 600px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}