.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.div1 {
    grid-row: span 4 / span 4;
}

.div2 {
    grid-row: span 5 / span 5;
}

.div3 {
    grid-row: span 3 / span 3;
}

.div4 {
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div5 {
    grid-row: span 4 / span 4;
    grid-column-start: 3;
    grid-row-start: 4;
}

.div6 {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 6;
}


/**/

.parent {
    width: 100%;
    table-layout: auto;
}

.parent h3 {
    font-size: 2.5rem;
}

.parent p {
    font-size: 1.5rem;
}

/**/
.div1 {
    background-color: red;
}

.div1 .content {
    margin: 3rem;
}

.div1 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.div1 img {
    width: 100%;
}

/**/
.div2 {
    background-color: yellow;
}

.div2 .content {
    margin: 3rem;
}

.div2 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.div2 img {
    width: 100%;
}

/**/
.div3 {
    background-color: rgb(0, 159, 0);
}

.div3 .content {
    margin: 3rem;
}

.div3 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.div3 img {
    width: 100%;
}

/**/
.div4 {
    background-color: blue;
}

.div4 .content {
    margin: 3rem;
}

.div4 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.div4 img {
    width: 100%;
}

/**/
.div5 {
    background-color: hotpink;
}

.div5 .content {
    margin: 3rem;
}

.div5 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.div5 img {
    width: 100%;
}

/**/
.div6 {
    background-color: peachpuff;
}

.div6 .content {
    margin: 3rem;
}

.div6 .image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.div6 img {
    width: 100%;
}


@media (max-width: 700px) {
    .parent h3 {
        font-size: 1.8rem;
    }

    .parent p {
        font-size: 1rem;
    }

    .div1 .content,
    .div2 .content,
    .div3 .content,
    .div4 .content,
    .div5 .content,
    .div6 .content {
        margin: 2rem;
    }
}

@media (max-width: 490px) {
    .parent h3 {
        font-size: 1.5rem;
    }

    .parent p {
        font-size: 1rem;
    }

    .div1 .content,
    .div2 .content,
    .div3 .content,
    .div4 .content,
    .div5 .content,
    .div6 .content {
        margin: 1rem;
    }
}