@font-face {
    font-family: CG;
    src: url(../fonts/CormorantGaramond-Regular.ttf);
}
@font-face {
    font-family: CG-Bold;
    src: url(../fonts/CormorantGaramond-Bold.ttf);
}
* {
    margin: 0;
    padding: 0;
}
/* ==================== Grid container */
body {
    background-color: #E9E9E0;
    font-family: CG;
    color: #333;
    display: grid;
    max-height: 100vh;
    justify-content: center;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 0.5fr 0.5fr;
    padding: 0 50px;
    margin-bottom: 250px;
}
/* ==================== Top section & biggest heading */
h1 {
    grid-column: 1/6;
    grid-row: 1/2;
    justify-self: center;
    font-size: 2.5em;
    padding: 10px;
}
h1 span:not(:nth-of-type(2)) {
    font-size: 1.5em;
}
h1 span:nth-of-type(2), h2 {
    font-variant-numeric: lining-nums;
}
h2 {
    grid-column: 1/6;
    grid-row: 2/3;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1em;
    border-top: 4px double black;
    border-bottom: 4px double black;
}
h3 {
    grid-column: 1/5;
    grid-row: 3/4;
    font-size: 2.3em;
    text-align: center;
    font-family: CG-Bold;
}
/* ==================== Articles left */
article > h4 {
    font-family: CG-Bold;
    font-size: 1.5em;
}
article:nth-of-type(odd) {
    grid-column: 1/2;
}
article:nth-of-type(even) {
    grid-column: 2/3;
}
/* ==================== Center image */
figure {
    grid-column: 3/4;
    grid-row: 4/7;
}
figure img {
    max-width: 200%;
}
/* ==================== Ads section right */
aside {
    grid-column: 5/6;
    grid-row: 3/7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
aside > h4 {
    font-size: 1.5em;
}
aside > h4, aside p {
    font-family: CG-Bold;
}
aside p {
    font-size: 3em;
}
aside div, aside p {
    text-align: center;
}
aside div h4 {
    font-size: 1.75em;
    font-family: CG-Bold;
}
aside div p {
    font-size: 1em;
}
aside div a {
    font-size: 1.25em;
    color: #666;
}
aside img {
    max-width: 90%;
    filter: grayscale(100%);
}
aside > p, aside div, aside img {
    border: 4px double black;
    padding: 10px;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}