.hero {
  background:
    linear-gradient(90deg, rgba(24, 30, 47, .91), rgba(75, 42, 53, .66)),
    url("assets/portrait.webp") center 42% / cover no-repeat;
}

.place { margin-bottom: 8px; }

.full-names {
  margin: 0 0 30px;
  font: 600 10px/1.6 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
}

.photos {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-template-rows: none;
  grid-auto-rows: 290px;
  gap: 12px;
}

.photos figure {
  margin: 0;
  overflow: hidden;
  background: var(--green);
}

.photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.photos figure:hover img { transform: scale(1.025); }
.photos .photo-wide { grid-row: span 2; }
.photos figure:nth-child(4) { grid-column: span 2; }
.photos figure:nth-child(5) img { object-position: center 28%; }

@media (max-width: 600px) {
  .hero { background-position: 62% center; }
  .full-names { font-size: 9px; }
  .photos { display: flex; flex-direction: column; }
  .photos figure { height: 390px; min-height: 0; }
  .photos .photo-wide { height: 260px; }
}