.four-container{
	display:grid;
    position:relative;
	grid-template-columns: 30vw 35vw;
    grid-template-rows:auto auto;
    gap:2vw;
    grid-template-areas: "photo photo2"
                        "photo3 photo4";                  
                        place-items: start center;
}

.photo{
    
    grid-area:photo;
}

.grid-item-1{
    grid-row: span 1;
}

.grid-item-2{
    grid-row: span 4;

}

.grid-item-3{
    grid-row: span 1;
    justify-content:start;
   
}

.grid-item-4{
    
    grid-row: span 1;
    width:28vw;
}

.photo2{
    grid-area:photo2;
    width:35vw;
}

.photo3{
    grid-area:photo3;
    width:30vw;
    height:100%;
}

.photo4{
   
    grid-area:photo4;
    width:35vw;
}


.photo>img{
    object-fit: cover;
    width:100%;

}

.photo2>img{
    object-fit: cover;
    width:100%;
    max-height: 100%;
}

.photo3>img{
    object-fit: cover;
    width:100%;
    max-height: 100%;
}

.photo4>img{
    object-fit: cover;
    width:100%;
    max-height: 100%;

}
.img_wrap {
    position: relative;
    height: auto;
    width: auto;
  }

.img__description {
    position: absolute;
    display:flex;
    text-align: center;
    justify-content: center;
    font-size:large;
    align-items: center;
    font-weight: 700;
    width:100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.788);
    color: black;
    visibility: hidden;
    opacity: 0;
    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
  }


   .img_wrap .photo:hover .img__description {
    visibility: visible;
    opacity: 1;
  }

  .img_wrap .photo2:hover .img__description {
    visibility: visible;
    opacity: 1;
  }
  
  .img_wrap .photo3:hover .img__description {
    visibility: visible;
    opacity: 1;
  }
  .img_wrap .photo4:hover .img__description {
    visibility: visible;
    opacity: 1;
  }

  @media screen and (max-width: 820px){
  .four-container{
	display:grid;
    position:relative;
	grid-template-columns: 80vw;
    grid-template-rows:auto auto;
    gap:2vw;
    grid-template-areas: "photo"
                        "photo2"
                        "photo3"
                        "photo4";                  
                        place-items: start center;
}

.photo{
    
    grid-area:photo;
}

.grid-item-1{
    grid-row: span 1;
}

.grid-item-2{
    grid-row: span 4;

}

.grid-item-3{
    grid-row: span 1;
    justify-content:start;
   
}

.grid-item-4{
    
    grid-row: span 1;
    width:28vw;
}

.photo2{
    grid-area:photo2;
    width:80vw;
}

.photo3{
    grid-area:photo3;
    width:80vw;
}

.photo4{
   
    grid-area:photo4;
    width:80vw;
}


.photo>img{
    object-fit: cover;
    width:100%;

}

.photo2>img{
    object-fit: cover;
    width:100%;
    max-height: 100%;
}

.photo3>img{
    object-fit: cover;
    width:100%;
    max-height: 100%;
}

.photo4>img{
    object-fit: cover;
    width:100%;
    max-height: 100%;

}
.img_wrap {
    position: relative;
    height: auto;
    width: auto;
  }

.img__description {
    position: absolute;
    display:flex;
    text-align: center;
    justify-content: center;
    font-size:4vw;
    align-items: center;
    font-weight: 700;
    width:100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.788);
    color: black;
    visibility: visible;
    opacity: 0;
    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
  }


   .img_wrap .photo .img__description {
    visibility: visible;
    opacity: 1;
  }

  .img_wrap .photo2 .img__description {
    visibility: visible;
    opacity: 1;
  }
  
  .img_wrap .photo3 .img__description {
    visibility: visible;
    opacity: 1;
  }
  .img_wrap .photo4 .img__description {
    visibility: visible;
    opacity: 1;
  }
  }