@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
*{
    margin: 0%;
    padding: 0%;
}

h1{
    font-size: 4em;
    font-family: 'Bungee Inline', cursive;
    font-style: oblique;
    color: #f66106;
}
body{
    background-image: url("razerbg.png");
    background-repeat: no-repeat;
   background-repeat: repeat-y;
    background-size:contain;
     text-align: center;
    
}
.container{
    display: grid;
    margin: 2em 5em;
    grid-template-columns: repeat(6,1fr);
   grid-auto-rows: 300px;
    grid-auto-flow: dense;
    grid-gap: 1em;
    

}
.gallery-item{
    width:100%;
    height:100%;
    position:relative;
    
}
.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius: 2em ;
    
} 
.gallery-item .image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    filter: grayscale(100%);
    transition: 0.5s ease-in-out;
   
}
#item1{
    grid-column-start: span 3;
    
}
#item2{
   grid-column-start: span 3 ;
   grid-row-start: span 2;
}
#item3{
 grid-column-start: span 2;
 grid-row-start: span 2;
}

#item5{
grid-column-start: span 2;
}
#item6{
grid-column-start: span 2;
grid-row-start: span 2;
}
#item7{
grid-row-start: span 2;
}
#item8{
    grid-column-start: span 3;
    grid-row-start: span 2 ;
}
#item9{
    grid-column-start: span 2;
}
.gallery-item:hover .image img{
    transform:scale(1.1);
    filter: grayscale(0%);
}

 @media (max-width:750px){
     #item1,#item2,#item3,#item4,#item5,#item6,#item7,#item8,#item9{
         grid-column-start: span 6;
     }
     
     body{
         align-items: center;
     }
    }
    @media (max-width:459px){
        .container{
            width: 90vw;
           

        }
       
        
    }