#hero {
    background: var(--ls-bg) no-repeat center;
    background-size: cover;
    min-height: 25vw;
    padding-block: 2rem;

    .container {
        max-width: 55%;
        text-align: center;
        color: var(--fore-color, var(--main-color));
    }
}

.section-title {
    font-size: 1.4em;
    font-weight: bolder;
}

@media (orientation: portrait) {
    #hero {
        background: var(--pt-bg) no-repeat center;
        min-height: 75vw;
        background-size: cover;
    }
}

@media (max-width: 576px) {
    #hero {
        .container {
            max-width: unset;
        }
    }
}