
.first-section {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: 20px;

    padding: 100px 10px 150px;
}

/* .first-section-main {
    font-family: var(--body-font-light);
    color: var(--graphite);
    font-size: 24px;

    padding: 60px 0;
}

.first-section-main>h2 {
    margin-bottom: 50px;
}

.first-section-main-article>p {
    margin-bottom: 30px;   
} */

.image-container {
    height: 320px;
    width: 240px;
}

.image-container-right {
    justify-self: end;
    align-self: end;
}

@media (max-width: 768px) {
    .first-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "content content"
            "image-left image-right";
        column-gap: 1rem;
        row-gap: 2rem;
        padding: 3rem 1rem 5rem;
    }

    .first-section .section-main {
        grid-area: content;
    }

    .first-section .image-container:first-child {
        grid-area: image-left;
    }

    .first-section .image-container-right {
        grid-area: image-right;
        transform: translateY(-20%);
    }

}