@media screen and (min-width:40rem) {
    header nav{
        display: block;
        text-align: center;
    }
    .cards{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .card:nth-child(2n) {
        margin-top: 1rem;
    }
}
@media screen and (min-width:48rem) {
    header div{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    header img, header nav,header .button{
        margin: 0;

    }
}
@media screen and (min-width:72rem) {
    h1,h2{
        font-size: 4rem;
    }
    .container{
        display: flex;
        align-items: center;
        margin: 0 auto;
        max-width: 72rem;
    }
    .row-reverse {
        flex-direction: row-reverse;
    }
    .about-column{
        flex:2;
    }
    .about-column p{
        font-size: 1.25rem;
        max-width: 16rem;
    }
    footer nav{
        flex: 1;

    }
    .newletter-form{
        flex: 3;
    }
}

@media screen  and (min-width:90rem) {
    .container{
        max-width: 100rem;
    }
    
}
.mt-1{
    margin-top: 1rem;
}
.mt-2{
    margin-top: 2rem;
}
.mb-1{
    margin-bottom: 1rem;
}
.mb-2{
    margin-bottom: 2rem;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.text-primary{
    color: var(--color-primary);
}
.text-center{
    text-align: center;
}