.portfolio { background: var(--color-surface); }
.portfolio .section-heading h2 { max-width: 19ch; }
.portfolio__grid { display: grid; grid-template-columns: 0.85fr 1.15fr 0.7fr; grid-template-rows: 20rem 14rem; gap: var(--space-4); }
.portfolio__item { position: relative; overflow: hidden; background: var(--color-surface-deep); }
.portfolio__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.portfolio__item:hover img { transform: scale(1.025); }
.portfolio__item figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--space-4); background: linear-gradient(transparent, rgba(23,23,21,0.72)); color: var(--color-white); font-size: var(--font-size-100); font-weight: 600; text-align: right; }
.portfolio__item--portrait { grid-row: 1 / 3; }
.portfolio__item--landscape { grid-column: 2 / 4; }
.portfolio__item--wide { grid-column: 2 / 3; }
.portfolio__item--detail { grid-column: 3 / 4; }
@media (max-width: 767px) {
  .portfolio__grid { grid-template-columns: 1.25fr 0.75fr; grid-template-rows: 23rem 13rem 15rem; gap: var(--space-3); }
  .portfolio__item--portrait { grid-row: 1; grid-column: 1 / 3; }
  .portfolio__item--landscape { grid-row: 2; grid-column: 1 / 3; }
  .portfolio__item--wide { grid-row: 3; grid-column: 1; }
  .portfolio__item--detail { grid-row: 3; grid-column: 2; }
  .portfolio__item figcaption { padding: var(--space-4); font-size: 0.7rem; }
}