.custom-layout {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "img1 img1 img2 img3"
    "img1 img1 img4 img5"
    "img4 img4 img5 img5";
  gap: 40px;

  max-width: 1300px;
  max-height: 1000px;
  margin: 20px
  
}
@media (max-width: 768px) {
  .custom-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img1"
      "img2"
      "img3"
      "img4"
      "img5";
  }
}
.large-text {
    font-size: 24px;
}
.image-wrapper {
  position: relative;
  bottom: 0;
}

.image-wrapper img {
  display: block; 
  width: 100%; 
  height: auto; 
}

.overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10%;
  color: rgb(000,255,000);
  opacity: 0; 
  transition: opacity 0.4s ease; 
}


.image-wrapper:hover .overlay {
  opacity: 50;
}