/* One-column featured transformations, twice the ordinary 2:1 tile height. */
#portfolio .feature-card { width:100%; box-sizing:border-box; aspect-ratio:1; height:auto; text-decoration:none; color:inherit; cursor:pointer; display:flex; flex-direction:column; overflow:hidden; border:3px solid #141414; border-radius:6px; background:#22211f; position:relative; }
#portfolio .feature-gallery { flex:1; min-height:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-x pan-y; }
#portfolio .feature-gallery::-webkit-scrollbar { display:none; }
#portfolio .feature-slide { flex:0 0 100%; min-width:0; height:100%; scroll-snap-align:start; scroll-snap-stop:always; }
#portfolio .feature-slide img { display:block; width:100%; height:100%; object-fit:cover; }
#portfolio .feature-caption { display:block; padding:20px 22px 22px; color:#f4f1eb; text-decoration:none; }
#portfolio .feature-caption h2 { display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; padding:0; font:400 clamp(23px,2.4vw,30px)/1.15 'Playfair Display',serif; text-transform:none; letter-spacing:0; }
#portfolio .feature-caption p { margin:0; font:400 14px/1.55 'Raleway',sans-serif; color:#c7c0b8; }
#portfolio .feature-card:hover h2 { color:#e7b29a; }
#portfolio .feature-card:focus-visible { outline:2px solid #e7b29a; outline-offset:-3px; }
@media(max-width:600px) {
 #portfolio .feature-caption { padding:14px 18px 18px; }
 #portfolio .feature-caption h2 { font-size:25px; }
 #portfolio .feature-caption p { font-size:13px; }
}

#portfolio .feature-slide img { user-select:none; -webkit-user-drag:none; }

/* Fixed corner label, inspired by the supplied Target card. */
#portfolio .portfolio-new-link { display:block; position:relative; }
#portfolio .portfolio-new-badge { position:absolute; top:0; left:0; z-index:2; display:block; padding:8px 13px 9px; border-radius:0 0 11px 0; background:#000; color:#fff; font:700 15px/1 Arial,sans-serif; letter-spacing:0; text-transform:none; pointer-events:none; }
@media(max-width:600px) {
 #portfolio .portfolio-new-badge { padding:7px 11px 8px; border-bottom-right-radius:10px; font-size:14px; }
}

/* A single column must flow with its content, independent of masonry timing. */
@media (max-width:750px) {
 #portfolio.grid { display:flex; flex-direction:column; gap:33px; height:auto !important; }
 #portfolio .grid-sizer { display:none; }
 #portfolio .grid-item { position:relative !important; top:auto !important; left:auto !important; transform:none !important; float:none; width:100% !important; padding:0; margin:0; opacity:1; }
 #portfolio .feature-card { height:auto !important; aspect-ratio:auto; }
 #portfolio .feature-gallery { flex:none; aspect-ratio:1.2; width:100%; }
 #portfolio .feature-slide { height:auto; }
 #portfolio .feature-caption { flex:none; }
}