:root {
    font-size: 62.5%;

    /* Background Colors */
    --background-default: #f5f4f0;

    /* Border Colors */
    --border-primary: #d9d9d9;

    /* Text Colors */
    --text-primary: #1b1b1b;
    --text-secondary: #333333;
    --text-tertiary: #696969;
    --text-headline: #e1624f;

    /* Accent Colors */
    --accent-blue: #0c51a7;
    --accent-orange: #e95e10;
    --accent-pink: #e5245e;
    --accent-purple: #591b98;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: inherit;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

body,
input,
button,
textarea {
    font: 400 1.6rem "Open Sans", sans-serif;

    font-variation-settings: "wdth" 100;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--text-secondary);
    min-height: 100vh;
    margin: 8.8rem 0 4.8rem;
}

a {
    color: inherit;
    text-decoration: none;
}

.text-headline {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-headline);
}

h1,
h2,
h3 {
    color: var(--text-primary);
    font-weight: 700;
}

h1 {
    font-size: 3.6rem;
    margin: 0.4rem 0 4.4rem;
}

h2 {
    font-size: 3.2rem;
    margin: 0.4rem 0 0.8rem;
}

h3 {
    font-size: 2.8rem;
    margin: 2.4rem 0 0.4rem;
}

img {
    border-radius: 2.8rem;
    object-fit: cover;
    object-position: center;
}

main {
    width: min(90%, 1120px);
    margin: 0 auto;

    figcaption {
        text-align: center;
        font-style: italic;
        margin-top: 2.4rem;
    }

    article {
        padding: 6.4rem 0 4rem;
        margin: 4rem 0;
        border-block: 1px solid var(--border-primary);

        > p {
            margin-bottom: 6.4rem;
        }

        section {
            & + & {
                margin-top: 4.8rem;
            }

            img {
                width: 100%;
                max-height: 350px;
            }

            p {
                margin-bottom: 2.4rem;
            }

            strong {
                font-weight: 700;
            }

            ul {
                list-style-position: inside;
                font-weight: 700;
            }
        }
    }

    > p {
        text-align: center;
    }
}

footer {
    margin-top: 6.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


@media (max-width: 700px) {
    :root {
        font-size: 50%;
    }
}