*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}




/* grid items */
.item-0,
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
  filter: grayscale(100%);
  object-fit: cover;
  background-size: cover;
  background-position: center;
  box-shadow: inset 2px 2px 8px 160px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.item-0:hover,
.item-1:hover,
.item-2:hover,
.item-3:hover,
.item-4:hover,
.item-5:hover {
  filter: grayscale(0%);
  transform: scale(1.3);
  box-shadow: inset 2px 2px 8px 160px rgba(0, 0, 0, 0);
}


.item-0-div {
  height: 20rem;
  width: 100%;
  
  overflow: hidden;
}

.item-1-div {
  height: 20rem;
  width: 100%;
  
  overflow: hidden;
}

.item-2-div {
  height: 20rem;
  width: 100%;
  
  overflow: hidden;
}

.item-3-div {
  height: 20rem;
  width: 100%;
 
  overflow: hidden;
}

.item-4-div {
  height: 20rem;
  width: 100%;
  
  overflow: hidden;
}

.item-5-div {
  height: 20rem;
  width: 100%;
  
  overflow: hidden;
}

.item-0 {
  background-image: url('item-0.jpg');
  width: 100%;
  height: 100%;
}

.item-1 {
  background-image: url('item-1.jpg');
  width: 100%;
  height: 100%;

}

.item-2 {
  background-image: url('item-2.jpg');
  width: 100%;
  height: 100%;
}

.item-3 {
  background-image: url('item-3.jpg');
  width: 100%;
  height: 100%;

}

.item-4 {
  background-image: url('item-4.jpg');
  width: 100%;
  height: 100%;

}

.item-5 {
  background-image: url('item-5.jpg');
  width: 100%;
  height: 100%;
}

/* end of grid ^^ */
@media (min-width: 768px) {
    .item-0-div{
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 2;
        grid-column-end: 3;
    }
    .item-1-div{
        grid-row-start: 1;
        grid-column-start: 3;
        grid-row-end: 2;
        grid-column-end: 4;
    }
    .item-2-div{
        grid-row-start: 1;
        grid-column-start: 4;
        grid-row-end: 2;
        grid-column-end: 5;
    }
    .item-3-div{
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: 3;
        grid-column-end: 2;
    }
    .item-4-div{
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: 3;
        grid-column-end: 3;
    }
    .item-5-div{
        grid-row-start: 2;
        grid-column-start: 3;
        grid-row-end: 3;
        grid-column-end: 5;
    }
   


   

   
 }