:root {
  --photos-gap: clamp(8px, 0.9vw, 18px);
  --photos-width: min(66%, 940px);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #ffffff;
}

body {
  overflow-x: hidden;
}

.photos-page {
  box-sizing: border-box;
  width: var(--photos-width);
  margin: 0 auto;
  padding: clamp(70px, 6.5vw, 96px) 0 clamp(72px, 7vw, 112px);
  color: #111111;
  font-family: "Heebo", Arial, sans-serif;
}

.photos-intro {
  margin: 0 0 clamp(34px, 4vw, 64px);
}

.photos-intro h1 {
  margin: 0;
  font-size: clamp(28px, 2.35vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.photos-group {
  width: 100%;
  min-width: 0;
}

.photos-group + .photos-group {
  margin-top: clamp(72px, 8vw, 136px);
}

.photos-page__caption {
  margin: 0 0 clamp(10px, 0.9vw, 18px);
  font-size: clamp(10px, 0.78vw, 15px);
  font-weight: 300;
  line-height: 1.3;
}

.architecture-grid,
.life-grid {
  display: grid;
  gap: var(--photos-gap);
}

.architecture-grid {
  grid-template-columns: 0.92fr 0.92fr 1.55fr;
  grid-template-rows: repeat(6, clamp(46px, 5.6vw, 108px));
}

.life-grid {
  aspect-ratio: 1.42;
  grid-template-columns: 1.2fr 0.95fr 1.45fr;
  grid-template-rows: minmax(0, 1.58fr) minmax(0, 1fr);
}

.photo,
.photo-slot {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  object-fit: cover;
}

.photo--staircase,
.photo--dark-facade {
  grid-row: 1 / 4;
}

.photo--modern-arch,
.photo--vaulted {
  grid-row: 4 / 7;
}

.photo--pink-building {
  grid-column: 3;
  grid-row: 1 / 3;
}

.photo--evening-street {
  grid-column: 3;
  grid-row: 3 / 5;
  object-position: center 90%;
}

.photo--garden {
  grid-column: 3;
  grid-row: 5 / 7;
}

.photo--balcony {
  grid-column: 1;
  grid-row: 1;
  height: 94%;
  align-self: end;
}

.photo--landscape {
  grid-column: 2;
  grid-row: 1;
}

.photo--furniture {
  grid-column: 3;
  grid-row: 1;
  height: 59%;
  align-self: end;
  object-fit: contain;
}

.photo--park {
  grid-column: 1 / 3;
  grid-row: 2;
  height: 100%;
  align-self: start;
}

.photo--cafe {
  grid-column: 3;
  grid-row: 2;
}

@media (max-width: 760px) {
  .photos-page {
    width: calc(100% - 32px);
    padding-top: 56px;
  }

  .architecture-grid,
  .life-grid {
    grid-template-rows: repeat(2, clamp(170px, 48vw, 360px));
  }

  .architecture-grid {
    grid-template-rows: repeat(6, clamp(55px, 16vw, 120px));
  }

  .life-grid {
    aspect-ratio: 1.42;
    grid-template-rows: minmax(0, 1.58fr) minmax(0, 1fr);
  }

}