grid.scss

.who-we-are, .what-we-do, .foreign-climes, .roping-up  {
        display: grid;
        grid-gap: 10px 10px;
}
@media (max-width: 719px) {
    .who-we-are, .what-we-do, .foreign-climes  {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto repeat( 2, 200px) ;
        &__text {
            grid-column: span 2;
            grid-row: span 1;
        }
        &__image1 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image2 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image3 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image4 {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
    .roping-up  {
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: auto 200px ;
        &__text {
            grid-column: span 2;
            grid-row: span 1;
        }
        &__image1 {
            display: none;
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image2 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image3 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image4 {
            grid-column: span 1;
            grid-row: span 1;
        }
    }

}

@media (min-width: 720px) and (max-width: 1199px) {
    .who-we-are, .what-we-do, .foreign-climes  {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto ;
        &__text {
            grid-column: span 1;
            grid-row: span 3;
        }
        &__image1 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image2 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image3 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image4 {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
    .roping-up  {
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: auto ;
        &__text {
            grid-column: span 1;
            grid-row: span 2;
        }
        &__image1 {
            display: none;
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image2 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image3 {
            grid-column: span 1;
            grid-row: span 1;
        }
        &__image4 {
            grid-column: span 1;
            grid-row: span 1;
        }
    }

}
@media (min-width: 1200px) {
    .who-we-are {
        grid-template-columns: repeat( 12, 1fr) ;
        grid-template-rows: repeat( 12, 1fr) ;
        &__text {
            grid-column: span 6;
            grid-row: span 12;
        }
        &__image1 {
            grid-column: span 3;
            grid-row: span 6;
        }
        &__image2 {
            grid-column: span 3;
            grid-row: span 6;
        }
        &__image3 {
            grid-column: span 3;
            grid-row: span 6;
        }
        &__image4 {
            grid-column: span 3;
            grid-row: span 6;
        }
    }
    .what-we-do {
        grid-template-columns: repeat( 12, 1fr) ;
        grid-template-rows: repeat( 12, 1fr) ;
        &__text {
            grid-column: span 3;
            grid-row: span 12;
        }
        &__image1 {
            grid-column: span 9;
            grid-row: span 7;
        }
        &__image2 {
            grid-column: span 5;
            grid-row: span 5;
        }
        &__image3 {
            grid-column: span 4;
            grid-row: span 5;
        }
    }

    .roping-up {
        grid-template-columns: repeat( 12, 1fr) ;
        grid-template-rows: repeat( 12, 1fr) ;
        &__text {
            grid-column: span 4;
            grid-row: span 12;
        }
        &__image1 {
            grid-column: span 4;
            grid-row: span 12;
        }
        &__image2 {
            grid-column: span 4;
            grid-row: span 8;
        }
        &__image3 {
            grid-column: span 4;
            grid-row: span 4;
        }
    }
    .foreign-climes {
        grid-template-columns: repeat( 12, 1fr) ;
        grid-template-rows: repeat( 12, 1fr) ;
        &__text {
            grid-column: span 6;
            grid-row: span 12;
        }
        &__image1 {
            grid-column: span 4;
            grid-row: span 4;
        }
        &__image2 {
            grid-column: span 2;
            grid-row: span 4;
        }
        &__image3 {
            grid-column: span 6;
            grid-row: span 4;
        }
        &__image4 {
            grid-column: span 6;
            grid-row: span 4;
        }
    }

}