@charset "UTF-8";

.shade { margin-left: 10px; 
    text-shadow: .1em .1em 2px rgb(46, 44, 63); }



    @media screen and (min-width: 700px){
        

main{

display: grid;
grid-template-columns:repeat (4, 1fr);
grid-template-rows:repeat  ( 3, 188px);

grid-gap: 20px;
row-gap: 5px;
width: 1210px;
/*  border: solid 2px blue;   */

}

.item-1{
grid-column: 1 / 2; 
grid-row: 1  /2;

margin-right: 0px;
width: 284px;


}

.item-2 {

    grid-column: 2 / 3; 
    grid-row: 1/2;
    border-radius: 7px; 
    height: 188px;
    width: 284px;
    
    
    }

.item-3 {
       
        grid-column: 3/ 4; 
        grid-row: 1/2;
        border-radius: 7px; 
        height: 188px;
        width: 284px;
         }

.item-4 {
       
            grid-column: 4/5; 
            grid-row: 1/2;
            border-radius: 7px; 
            height: 188px;
            width: 284px;
             }
             


.item-5 {

    grid-column: 1 / 2; 
    grid-row: 2/3;
    border-radius: 7px;
    height: 188px;
    width: 284px;
    
    
    }
.item-6 {
       
        grid-column: 2 / 3; 
        grid-row: 2 / 3;
        border-radius: 7px; 
        height: 188px;
        width: 284px;
        
        }
    
.item-7 {
            
            grid-column: 3/ 4; 
            grid-row: 2/3;
            border-radius: 7px; 
            height: 188px;
            width: 284px;
             }
.item-8 {
               
                grid-column:4/5; 
                grid-row: 2/3;
                border-radius: 7px; 
                height: 188px;
                width: 284px;
                 }
    
.img_1, .img_2 , .img_3, .img_4 {
border: 3px solid orange;
border-radius: 7px;
width: 284px;
height: 185px;
margin-right: 0px;
margin: 0px;
padding: 0px;
margin-left: 0px;


}
.downfoot {
    background-color: lightslategray;
    grid-column: 1 / span 4;
    grid-row: 4/5;
    width: 100%;
    height: 1000%;
    color: lightblue;
    font-size: 1.5rem;
    padding: 1rem;
 
    
}

.hello{
    grid-column: 1 / span 4;
    grid-row: 5 / 6;
    z-index: 10;
    background-color: darkcyan;
    width: 100%; 
    padding: 0px;
    font-size: 1.5rem;
    color: pink; 

    }


    .hello.line {
        display: flex;
        justify-content: center;

    }

  }




    @media screen and (max-width: 700px){
      
main{
display: grid;
grid-template-columns:repeat (2, 1fr);
grid-template-rows:repeat  ( 4, 188px);
grid-gap: 20px;
position: absolute;
row-gap: 5px;
}

/*  border: solid 2px blue;  */


.item-1{
grid-column: 1 / 2; 
grid-row: 1  / 2;

margin-right: 0px;
width: 284px;

}

.item-2 {

    grid-column: 2 / 3; 
    grid-row: 1 / 2;
    border-radius: 7px; 
    height: 188px;
    width: 284px;
     
    }

.item-3 {
       
        grid-column: 1 / 2; 
        grid-row: 3/4;
        border-radius: 7px; 
        height: 188px;
        width: 284px;
         }

.item-4 {
       
            grid-column: 2 / 3; 
            grid-row: 3 / 4;
            border-radius: 7px; 
            height: 188px;
            width: 284px;
             }



.item-5{

    grid-column: 1 / 2; 
    grid-row: 2 / 3;
    border-radius: 7px;
    height: 388px;
    width: 284px;
      }

 

 
.item-6 {
       
        grid-column: 2 / 3; 
        grid-row: 2 / 3;
        border-radius: 7px; 
        height: 388px;
        width: 284px;
        
        }     
    
.item-7 {
            
            grid-column: 1/ 2; 
            grid-row: 4/5;
            border-radius: 7px; 
            height: 388px;
            width: 284px;
             }

             
.item-8 {
               
                grid-column: 2/3; 
                grid-row: 4/5;
                border-radius: 7px; 
                height: 388px;
                width: 284px;
            }

            .downfoot {
                background-color: lightslategray;
                grid-column: 1 / span 2;
                grid-row: 5/6;
                width: 100%;
                height: 1000%;
                padding: 1rem;
                color: lightblue;
                font-size: 1.5rem;
            }

            .hello{
                grid-column: 1 / span 2;
                grid-row: 6 / 7;
                z-index: 10;
                background-color: darkcyan;
                width: 100%; 
                padding: 0px;
                font-size: 1.5rem;
                color: pink; 
                }

                .hello.line {
                    display: flex;
                    justify-content: center;

                }
                 
                }   
                
                
                 
.img_1, .img_2 , .img_3, .img_4 {
border: 3px solid orange;
border-radius: 7px;
width: 284px;
height: 185px;
margin-right: 0px;
margin: 0px;
padding: 0px;
margin-left: 0px;
}