body{
  margin:5pxoverlay;
  font-family: Arial, Helvetica, sans-serif;
}

/* Container */
.three-section{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:5px;
  max-width:1200px;
  margin:5px auto;
}

/* Box */
.box{
  position:relative;
  overflow:hidden;
  height:350px;
}

/* Image */
.box img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Overlay text */
.overlay{
  position:absolute;
  bottom:0;
  width:100%;
  background:rgba(255, 95, 64, 0.95);
  text-align:center;
  padding:15px 0;
}
.overlay h3{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:bold;
}

.overlay-2nd{
  position:absolute;
  bottom:0;
  width:100%;
  background:#2A4652;
  text-align:center;
  padding:15px 0;
}

.overlay-2nd h3{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:bold;
}

.overlay-3rd{
  position:absolute;
  bottom:0;
  width:100%;
  background:#009270;
  text-align:center;
  padding:15px 0;
}

.overlay-3rd h3{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:bold;
}

/* Hover effect */
.box:hover img{
  transform:scale(1.05);
  transition:0.3s ease;
}

/* Responsive */
@media(max-width:768px){
  .three-section{
    grid-template-columns:1fr;
  }
}