<span class="background">
    <section class="gallery">
      <section class="img-card">
          <img src="https://assets.codepen.io/210284/flower-1.jpg" alt="" />
      </section>

      <section class="img-card">
          <img src="https://assets.codepen.io/210284/flower-2.jpg" alt="" />
      </section>

      <section class="img-card">
          <img src="https://assets.codepen.io/210284/flower-3.jpg" alt="" />
      </section>

      <section class="img-card">
          <img src="https://assets.codepen.io/210284/flower-4.jpg" alt="" />
      </section>

      <section class="img-card">
          <img src="https://assets.codepen.io/210284/flower-5.jpg" alt="" />
      </section>
    </section>
  </span>

html {
  background: #131212;
  margin: 0;
  padding: 0;
}

.background {
  display: grid;
  place-items: center;
  height: 90vh;
  padding: 5vh 0 0 0;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
}

.img-card {
  position: relative;
  left: 0px;
  width: 120px;
  border-radius: 1em;
  height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  transition: 0.3s ease-in-out;
  flex: 0.25; 
  background: beige;
}

.img-card img {
  min-height: 80vh;
}

.img-card:hover {
  flex: 2;
  cursor: pointer;
}