.hero {
    margin-top: 11em;
    padding-top: 2em;
    text-align: center;
    background-image: url(../media/background.jpg);
    background-position: 50%;
    background-size: cover;

    align-items: center;

    display: grid;
    gap: 2em;
    grid-template-columns: 1.2fr 1fr;

    .hero-text {
        text-align: right;
    }

    .hero-img {
        justify-self: start;
    }
}

.hero-btns {
    margin-top: 1em;
}

.info {
    max-width: 70ch;
    margin-inline: auto;
    margin-top: 7em;
    padding-inline: 4em;
    margin-bottom: 4em;
}

#info1 {
    margin-top: 10em;
}

@media screen and (max-width: 800px) {

    .hero {
        margin-top: 4em;
        padding-top: 3em;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr;
    }

    .hero-img {
        grid-row: 1;
        justify-self: center !important;
    }

    .hero-text {
        grid-row: 2;
        text-align: center !important;
    }
    
}