.portfolio-page { background: white; }
.portfolio-gallery { position: relative; overflow: hidden; padding-block: 112px 128px; background: var(--sand); }
.portfolio-gallery::before { content: ""; position: absolute; top: 120px; right: -150px; width: 400px; height: 400px; border: 1px solid rgba(183,122,43,.15); border-radius: 50%; }
.portfolio-intro { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 48px; }
.portfolio-intro .section-title { margin: 0; }
.portfolio-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.portfolio-item { position: relative; aspect-ratio: 1.52/1; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--coal); box-shadow: var(--shadow-sm); }
.portfolio-item:nth-child(3) { grid-column: 1; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s, opacity .3s; }
.portfolio-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 52%,rgba(24,17,13,.86)); opacity: 0; transition: opacity .3s; }
.portfolio-item figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; color: white; font: 700 20px/1.3 "Manrope",sans-serif; opacity: 0; transform: translateY(10px); transition: .3s; }
.portfolio-item:hover img { transform: scale(1.04); opacity: .92; }
.portfolio-item:hover::after, .portfolio-item:hover figcaption { opacity: 1; }
.portfolio-item:hover figcaption { transform: none; }

@media (max-width: 720px) {
    .portfolio-gallery { padding-block: 72px 82px; }
    .portfolio-intro { align-items: flex-start; flex-direction: column; }
    .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }
    .portfolio-item:nth-child(3) { grid-column: auto; }
    .portfolio-item figcaption, .portfolio-item::after { opacity: 1; }
    .portfolio-item figcaption { transform: none; }
}

@media (max-width: 420px) {
    .portfolio-item { aspect-ratio: 1.3/1; }
}