* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/* ### - A - ### */

a {
    color: black;
}

a:hover {
    color: blue;
}

/* ### - B - ### */

body {
    padding: 5px;
}

/* ### - C - ### */
/* ### - D - ### */
/* ### - E - ### */
/* ### - F - ### */
/* ### - G - ### */
/* ### - H - ### */

h1 {
    font-weight: normal;
    font-size: 64px;
    position: sticky;
    top: 5px;
    margin-bottom: 50px;
}

h2 {
    font-weight: normal;
    font-size: 50px;
    margin-bottom: 50px;
}

/* ### - I - ### */

.info {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 1fr 1fr 6fr;
    font-size: 16px;
    margin-bottom: 50px;
}

.info p {
    line-height: 20px;
}

.topic {
    grid-column: 1/2;
    grid-row-start: 1;
}

.year {
    grid-column: 2/3;
}

.copy {
    grid-column: 3/4;
}

/* ### - J - ### */
/* ### - K - ### */
/* ### - L - ### */
/* ### - M - ### */

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

/* ### - N - ### */
/* ### - O - ### */
/* ### - P - ### */
/* ### - Q - ### */
/* ### - R - ### */
/* ### - S - ### */

section {
    grid-column: 1/2;
}

img {
    grid-column: 2/3;
    max-width: 100%;
    max-height: 80vh;
    margin-bottom: 10px;
}

section span {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 24px;
}

section p {
    font-size: 16px;
    grid-column: 2/7;
    margin-top: 16px;
}

section .gallery {
    grid-column: 2/7;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

section .gallery img {
    grid-column: span 1;
}

/* ### - T - ### */
/* ### - U - ### */
/* ### - V - ### */
/* ### - W - ### */
/* ### - X - ### */
/* ### - Y - ### */
/* ### - Z - ### */

@media screen and (max-width:700px) {
    h1 {
        width: 100%;
    }
    h2 {
        font-size: 30px;
    }
    section p {
        margin-top: 6px;
    }
    section {
        grid-column: 1/3;
    }
    img {
        grid-column: 1/3;
        margin-bottom: 50px;
    }
    .info {
        grid-template-columns: 1fr 3fr;
    }
    .topic {
        grid-column: 1/3;
    }
    .year {
        grid-column: 1/2;
    }
    .copy {
        grid-column: 2/3;
    }
}