.photo { background: var(--surface); padding: 110px 0 100px; position: relative; z-index: 1; }
.photo__pics { display: grid; grid-template-columns: 5fr 4fr 3fr; align-items: end; gap: 20px; max-width: 1160px; margin: auto; padding: 0 40px; }
.photo__pic { border-radius: 20px; overflow: hidden; }
.photo__pic img { width: 100%; object-fit: cover; }
.photo__pic--n1 img { aspect-ratio: 5 / 4; }
.photo__pic--n2 { transition-delay: .15s; }
.photo__pic--n2 img { aspect-ratio: 4 / 5; }
.photo__pic--n3 { transition-delay: .3s; border-radius: 999px 999px 0 0; }
.photo__pic--n3 img { aspect-ratio: 3 / 4; object-position: 35% 50%; }
.photo__note { text-align: center; margin-top: 46px; padding: 0 20px; }
.photo__note span { display: inline-block; white-space: nowrap; }
.photo__note a { text-decoration: underline; text-underline-offset: .3em; }
.photo__note a:hover { text-decoration: none; }
@media (max-width: 767px) {
  .photo { padding: 70px 0 70px; }
  .photo__pics { grid-template-columns: 3fr 2fr; gap: 10px; padding: 0 24px; }
  .photo__pic--n1 { grid-column: 1 / -1; }
  .photo__pic--n2 img { aspect-ratio: 1; }
  .photo__note { margin-top: 30px; }
  .photo__note span { display: block; }
}