.HeroSection {
    --hs-spacing: 16px;
    --hs-height: 289px;
    --hs-heading-size: 32px;
    min-height: var(--hs-height);
    }
.HeroSection::before {
    content: "";
    background: linear-gradient(0deg, rgba(4, 9, 26, 0.6) 35.01%, rgba(4, 9, 26, 0) 80.15%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
    }
.HeroSection__heading {
    font-size: var(--hs-heading-size);
    }
@media (min-width: 720px) {
    .HeroSection {
        --hs-spacing: 32px;
        --hs-heading-size: 48px;
        }
    .HeroSection::before {
        border-radius: 0.75rem;
        }
    }
.HeroSection {
    --hs-height: 256px;
    min-height: var(--hs-height);
    }
@media (min-width: 720px) {
    .HeroSection {
        --hs-height: 336px;
        width: 100%;
        }
    }
@media (min-width: 1008px) {
    .HeroSection {
        --hs-height: auto;
        height: 360px;
        }
    }