.banner{
    max-width: 76rem;
    margin: 0 auto;
    padding: 1.5rem;
}


.banner-content{
    display: flex;
    flex-direction: column-reverse;
    gap: 1.5rem;
    background-color: #f3f3f3;
}
@media(width > 48rem){
    .banner-content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.banner .banner-text{
    padding: 2rem;
}
@media(width > 48rem){
    .banner .banner-text{
        grid-area: 1 / 1 / 1 / 2;
        padding: 4rem 0 2.5rem 5rem;
    }
}

.banner .banner-image{
    grid-area: 1 / 1 / 1 / 3;
    align-self: end;
}

.banner .banner-image img{
    width: 100%;
    height: auto;
}