header#hero-page {
    display: flex;
    gap: var(--gap-hero-page);
    flex-direction: column;

    h1 {
        text-align: center;
        font-size: 1.25em;
        text-wrap: balance;
        color: var(--color-site-title);
        text-shadow: var(--shadow-text);
        font-variant: small-caps;
        font-weight: normal;
    }
}

.sup-title {
    text-align: center;
    font-variant: small-caps;
    text-shadow: var(--shadow-text);
    color: var(--color-site-title);
}

@media (min-width: 460px) {
    header#hero-page {
        h1 {
            font-size: 2.5rem;
        }
    }
}

@media (min-width: 768px) {
    header#hero-page {
        h1 {
            font-size: 4rem;
        }
    }
}