/* The grid: Four equal columns that floats next to each other */
.row{
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(8, minmax(0,1fr));
  /* background-color: green; */
  /* align-items: center; */
}
.column {
  /* float: left; */
  width: 100%;
  /* padding: 10px; */
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
/* .row:after {
  content: "";
  display: table;
  clear: both;
} */

/* The expanding image container */
.container {
  position: relative;
  /* display: none; */
  height: 400px;
  min-height: 400px;
  margin-bottom: 5px;
}
.container img{
  /* height: 400px; */
  width: 100%;
  height: 100%;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
@media(max-width: 480px){ 
  .row{
    grid-template-columns: repeat(5, minmax(0px, 1fr));
  }
}