.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 220px);
  grid-template-areas:
    "one one two"
    "one one three"
    "four four four";
  gap: 16px;
  text-align: left;
}
.gallery figure {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
  color: #FFFFFF;
}
.gallery figcaption p {
  margin-top: 4px;
  font-size: 14px;
}
.spot-1 {
  grid-area: one;
}
.spot-2 {
  grid-area: two;
}
.spot-3 {
  grid-area: three;
}
.spot-4 {
  grid-area: four;
}