Можно ли сделать мои изображения отзывчивыми с сеткой CSS?

Question

Я пытаюсь получить эти два изображения для сохранения их соотношения сторон, когда ширина порта просмотра превышает 1200 пикселей. Я попытался использовать max-width: 100% и height: auto на обоих изображениях, но не получил желаемый результат.

Мои коды

.section1 {
        display: grid;
        margin: 75px 0;
    }
    .section1leftimg {
        grid-column: 1 / 5;
        grid-row: 1 / 7;
    }
    .section1rightimg {
        grid-column: 4 / 12;
        grid-row: 2 / 12;
    }
    .section1 p {
        font-family: 'Poppins';
        opacity: 0.7;
        grid-column: 2 / 4;
        grid-row: 7 / 9;
        padding-top: 60px;
    }
    .section1 h6 {
        grid-column: 2/3;
        grid-row: 10/11;
        padding: 40px 0 5px 0;
        font-family: 'League Spartan';
        text-transform: uppercase;
        letter-spacing: 4px;
        opacity: .9;
        border-bottom: 2px solid #72b2f1;
    }

<div class="section1">
    <img src="https://imgur.com/XBORWLh" alt="" class="section1leftimg">
    <img src="https://imgur.com/bHi24jV" alt="" class="section1rightimg">
    <p>By better understanding the various aspects of surfing, you will improve faster and have more fun in the water.</p>
    <h6><a href="#">Read More</a></h6>
</div>

РЕДАКТИРОВАТЬ: Так что я понял это. Это мой новый CSS

.section1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.section1leftimg {
    grid-column: 1 / 7;
    grid-row: 1 / 7;
}
.section1leftimg img {
    width: 100%;
    height: auto;
}
.section1rightimg {
    grid-column: 6 / 13;
    grid-row: 2 / 9;
}
.section1rightimg img {
    width: 100%;
    height: auto;
}