body {
    background-color: rgb(208, 176, 89);
}

.main-flow {
    display:flex;
    flex-direction: column;
}

.text-layout {
    display:grid;
    grid-template-columns: 2fr 5fr 2fr;
}

.text-content {
    grid-column: 2/3;
    padding: 100px;
    font-size: 1.2rem;
}

.image-container {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 580px));
    justify-items:center;
    align-items: center;

    /* max-width: 100%; */ 
}

@media screen and (min-width: 1360px) {
   
    .image-container img {
        max-width: 80%;
    }

    .image-container img:nth-child(1) { 
        margin-top: 20%;
        margin-left: 10%;
    }

    .image-container img:nth-child(2) { 
        margin-left: 100%;
        margin-top: -14%;
    }

    .image-container img:nth-child(3) {

        margin-left: 40%;
        margin-top:50%;
        max-width: 60%;
    }

    .image-container img:nth-child(4) {
        margin-top: 0%;
        margin-left: 20%;
    }

    .image-container img:nth-child(5) {
        margin-left:-20%;
        margin-top: 0%; 
    }

    .image-container img:nth-child(6) {
        margin-left:120%;
        margin-top: 40%; 
        margin-bottom: 20%;
    }

}


@media screen and (max-width: 1359px)  and (min-width:769px) {
   
    .text-layout {
    display:grid;
    grid-template-columns: 1fr 5fr 1fr;
    }

    .text-content {
        grid-column: 2/3;
        padding: 40px;
        font-size: 1.2rem;
    }

     .image-container img {
        max-width: 80%;
    }

    .image-container img:nth-child(1) { 
        margin-top: 10%;
        margin-left: -15%;
    }

    .image-container img:nth-child(2) { 
        margin-left: 150%;
        margin-top: -70%;
    }

    .image-container img:nth-child(3) {

        margin-left: -20%;
        margin-top:10%;
        max-width: 60%;
    }

    .image-container img:nth-child(4) {
        margin-top: -50%;
        margin-bottom: 30%;
        margin-left: 150%;
        max-width: 60%;
    }

    .image-container img:nth-child(5) {
        margin-left:-20%;
        margin-top: 20%; 
        margin-bottom: 30%;
    }

    .image-container img:nth-child(6) {
        margin-left:150%;
        margin-top: -100%; 
    }

}


@media screen and (max-width: 768px) {
   
    .text-layout {
    display:flex;
    flex-direction: column;
    }

    .text-content {
        padding:3rem;
    }


     .image-container img {
        max-width: 80%;
    }

    .image-container img:nth-child(1) { 
        margin-top: 10%;
        margin-left: -10%;
    }

    .image-container img:nth-child(2) { 
        margin-left: 10%;
        margin-top: 10%;
    }

    .image-container img:nth-child(3) {

        margin-left: 40%;
        margin-top: 10%;

    }

    .image-container img:nth-child(4) {
        margin-top: 10%;
        margin-bottom: 0%;
        margin-left: 0%;
    }

    .image-container img:nth-child(5) {
        margin-left:10%;
        margin-top: 10%; 
    }

    .image-container img:nth-child(6) {
        margin-left:10%;
        margin-top: 10%; 
        margin-bottom: 10%;
    }

}