.portfolio{background:#242522;color:#fff}
.portfolio .eyebrow{color:#d49c72}
.portfolio-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:42px}
.portfolio-heading>p{max-width:440px;color:#bcbcb3;margin:0}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:260px;gap:14px}
.portfolio-item{position:relative;overflow:hidden;border:0;padding:0;background:#111;color:#fff;text-align:left}
.portfolio-item.wide{grid-column:span 2}
.portfolio-item.tall{grid-row:span 2}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s,opacity .3s}
.portfolio-item:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#000b)}
.portfolio-item span{position:absolute;z-index:1;left:18px;bottom:14px;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.portfolio-item:hover img,.portfolio-item:focus-visible img{transform:scale(1.035);opacity:.9}
.portfolio-lightbox{position:fixed;inset:0;z-index:100;background:#111e;border:0;padding:4vh 4vw;width:100%;height:100%;max-width:none;max-height:none}
.portfolio-lightbox::backdrop{background:#111e}
.portfolio-lightbox img{width:100%;height:92vh;object-fit:contain}
.portfolio-lightbox button{position:absolute;right:22px;top:18px;width:46px;height:46px;border:1px solid #ffffff80;border-radius:50%;background:#242522;color:#fff;font-size:28px;line-height:1}
@media(max-width:760px){.portfolio-heading{align-items:start;flex-direction:column;gap:22px}.portfolio-grid{grid-template-columns:1fr 1fr;grid-auto-rows:210px}.portfolio-item.wide{grid-column:span 2}.portfolio-item.tall{grid-row:span 1}.portfolio-lightbox{padding:3vh 3vw}.portfolio-lightbox img{height:94vh}}
@media(max-width:480px){.portfolio-grid{grid-template-columns:1fr;grid-auto-rows:240px}.portfolio-item.wide{grid-column:span 1}}