.section-hero-title {

    text-align:center;
    padding:3em 0;
    margin:var(--space-section) 0;
    align-content:center;
    display:flex;
    flex-direction:column;
    gap:0.5em;

    h1 {
        font-size:4em;
        font-weight:bold;
        padding:0;
        margin:0;
    }

    &.without-padding {
        padding:0;
    }

    &.without-margin {
        margin:0 0;
    }

    &.variant-default {

    }

    &.variant-surface {
        color:#fff;
        background-color:var(--brand-colour-surface);
    }
}

@media (width <= 992px) {
    .section-hero-title {
        gap:1.5em;
        & h1 {
            font-size:2.5em;
        }
    }
}