.hero {
    margin-top: 4%;
    flex-direction: column;
    align-items: left;
    justify-items: left;
    justify-content: left;
    max-inline-size: 1440px;
    inline-size: 100%;
    padding-block: 10vh;

    padding-inline: 30px;
    margin-inline: auto;

    .heading {
        grid-auto-flow: column;
        align-items: left;
        gap: 12rem;
        inline-size: 100%;
        font-size: 1.5rem;
    }
    ol {
        font-size: 1.2rem;

        li {
            margin-block: 1rem;
            margin-block-start: 2rem;
        }
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-items: left;
        justify-content: left;
        gap: 3rem;
    }
}