/* ========================
   OUR PORTFOLIO
   ======================== */
.section-portfolio {
  position: relative;
  height: 2033px;
  background-color: var(--color-dark-maroon);
}

/* --- Header --- */
.section-portfolio__title {
  position: absolute;
  left: 723px;
  top: 120px;
  font-family: var(--font-serif);
  font-size: var(--text-9xl);
  line-height: var(--leading-9xl);
  color: var(--color-cream);
  letter-spacing: var(--tracking-tightest);
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
}

.section-portfolio__sep {
  position: absolute;
  height: 1px;
  background-color: var(--color-cream);
}

.section-portfolio__sep--left {
  left: 120px;
  top: 172px;
  width: 488px;
}

.section-portfolio__sep--right {
  left: 1312px;
  top: 173px;
  width: 488px;
}

/* --- Photo grid --- */
.section-portfolio__photo {
  position: absolute;
  overflow: hidden;
}

.section-portfolio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Row 1 */
.section-portfolio__photo--1 { left: 121px; top: 326px; width: 420px; height: 794px; }
.section-portfolio__photo--2 { left: 541px; top: 326px; width: 419px; height: 794px; }
.section-portfolio__photo--3 { left: 960px; top: 326px; width: 419px; height: 796px; }
.section-portfolio__photo--4 { left: 1379px; top: 326px; width: 420px; height: 794px; }

/* Row 2 */
.section-portfolio__photo--5 { left: 121px; top: 1120px; width: 419px; height: 796px; }
.section-portfolio__photo--6 { left: 541px; top: 1120px; width: 419px; height: 796px; }
.section-portfolio__photo--7 { left: 960px; top: 1120px; width: 419px; height: 796px; }
.section-portfolio__photo--8 { left: 1379px; top: 1120px; width: 420px; height: 796px; }

/* --- Dark overlay over grid --- */
.section-portfolio__overlay {
  position: absolute;
  left: 121px;
  top: 326px;
  width: 1678px;
  height: 1590px;
  background-color: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}