.about-hero{
    background-image: url(/resources/about/hero-bg.png);
    background-color: var(--main-gray-dark);
    background-position: center;
    background-size: cover;
}

.grid-content{
    display: grid;
    grid-template-areas:
        'one two'
        'three four'
        'five six';
    align-items: center;
    row-gap: 5rem;
    column-gap: 15rem;
}



@media (max-width: 1100px) {
    .grid-content {
        display: grid;
        grid-template-areas:
            'one'
            'two'
            'four'
            'three'
            'five'
            'six';
    }


    .why-card img{
        width: 20%;
    }
}


.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }
.six { grid-area: six; }