/* =========================
   CSS RESET
   ========================= */

body, header, nav, main, footer, img, ul, li, h1, h2, h3, p,
section, article, aside, figure, figcaption {
margin: 0;
padding: 0;
border: 0;
}

/* =========================
   GLOBAL STYLES
   ========================= */

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f6f1e7;
color: #2a1f14;
line-height: 1.5;
}

/* =========================
   HEADER
   ========================= */

header {
background-color: #2a1f14;
color: #ffffff;
text-align: center;
padding: 2%;
}

/* =========================
   NAVIGATION
   ========================= */

nav {
background-color: #3d2b1f;
}

nav ul {
list-style-type: none;
text-align: center;
}

nav li {
border-top: 1px solid #ffffff;
}

nav a {
display: block;
color: #ffffff;
text-decoration: none;
padding: 1em;
font-weight: bold;
}

/* =========================
   MAIN CONTENT
   ========================= */

main {
padding: 2%;
}

/* =========================
   TYPOGRAPHY
   ========================= */

h1 {
font-size: 2em;
}

h2 {
margin-bottom: 1%;
}

h3 {
margin-top: 1%;
}

p {
margin-bottom: 1%;
}

/* =========================
   IMAGES
   ========================= */

img {
max-width: 100%;
display: block;
}

/* =========================
   UTILITY CLASS
   ========================= */

.round {
border-radius: 8px;
}

/* =========================
   ASIDE
   ========================= */

aside {
text-align: center;
font-size: 1.5em;
font-weight: bold;
text-shadow: 4px 4px 10px #c5a687;
margin-bottom: 2%;
}

/* =========================
   FIGURE
   ========================= */

figure {
border: 4px solid #2a1f14;
box-shadow: 6px 6px 10px #c5a687;
max-width: 400px;
margin: 2% auto;
background-color: #ffffff;
}

/* =========================
   FIGCAPTION
   ========================= */

figcaption {
padding: 2%;
border-top: 4px solid #2a1f14;
text-align: center;
font-size: 0.9em;
}

/* =========================
   FOOTER
   ========================= */

footer {
text-align: center;
background-color: #2a1f14;
color: #ffffff;
padding: 2%;
font-size: 0.9em;
}

/* =========================
   TABLET MEDIA QUERY
   ========================= */

@media screen and (min-width: 630px) {

nav li {
display: inline-block;
border-top: none;
}

nav a {
padding: 1em 2em;
}

/* GRID LAYOUT */

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

/* ASIDE SPANS COLUMNS */

aside {
grid-column: 1 / span 2;
}

}

/* =========================
   DESKTOP MEDIA QUERY
   ========================= */

@media screen and (min-width: 1015px) {

nav a:hover {
opacity: 0.5;
}

/* GRID LAYOUT */

.grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
}

aside {
grid-column: 1 / span 3;
font-size: 2em;
}

}

/* =========================
   LARGE DESKTOP MEDIA QUERY
   ========================= */

@media screen and (min-width: 1921px) {

.grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
}

aside {
grid-column: 1 / span 4;
font-size: 3em;
}

}