@use 'variables' as *;

.wp-block-overlapping-images-block-overlapping-images.layout-text-up-down{

  .overlapping-imgs-center-content{
  
    .overlapping-imgs-innerblocks-wrap{
      grid-column: 3 / 8;
      grid-row: 4 / 10
    }
    
    .overlapping-imgs-image-one-wrap{
      grid-column: 11 / 17;
      grid-row: 3 / 13;
    }
    
    .overlapping-imgs-image-two-wrap{
      grid-column: 7 / 13;
      grid-row: 1 / 12;
    }
    
    
    @container (max-width: #{$large}){
      .overlapping-imgs-image-one-wrap{
        grid-column: 11 / 18;
      }

      .overlapping-imgs-image-two-wrap{
        grid-column: 6 / 13;
      }
    
      .overlapping-imgs-innerblocks-wrap{
        grid-column: 2 / 8;
      }
    }

    @container (max-width: #{$medium}){
      
        .overlapping-imgs-innerblocks-wrap{
          grid-row: 4 / 11;
          grid-column: 2/9;
        }

    }

    @container (max-width: #{$tablet}){
      
      .overlapping-imgs-innerblocks-wrap{
        grid-column: 6 / 14;
        grid-row: 6 / 11;
      }

      .overlapping-imgs-image-one-wrap{
        grid-column: 9 / 18;
        grid-row: 1 / 7;
      }
      
      .overlapping-imgs-image-two-wrap{
        grid-column: 2 / 11;
        grid-row: 3 / 9;

      }
      
    }

    @container (max-width: #{$lg-mobile} ){

      .overlapping-imgs-innerblocks-wrap{
        grid-column: 4 / 16;
      }
      
      .overlapping-imgs-image-one-wrap{
        grid-column: 8 / 16;
        grid-row: 2 / 8;
      }

      .overlapping-imgs-image-two-wrap{
        grid-column: 4 / 12;
        grid-row: 1 / 7;
      }

    }

    @container (max-width: #{$mobile}){

      .overlapping-imgs-innerblocks-wrap{
        grid-column: 2 / 18;
      }

      .overlapping-imgs-image-one-wrap{
        grid-column: 9 / 18; 
      }

      .overlapping-imgs-image-two-wrap{
        grid-column: 2 / 11;
      }

    }

    @container (max-width: #{$small}){

      .overlapping-imgs-innerblocks-wrap{
        grid-column: 1 / 19;
      }

      .overlapping-imgs-image-one-wrap{
        grid-column: 7 / 19;
      }

      .overlapping-imgs-image-two-wrap{
        grid-column: 1 / 11;
      }

    }

  }

}