:root {
  --portfolio-media-card-width: 270px;
  --portfolio-media-card-height: 390px;
  --portfolio-media-card-radius: 8px;
  --portfolio-media-card-gap: var(--portfolio-space-03);
  --portfolio-media-card-hover-scale: 1.025;
}

.portfolio-media-carousel { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.portfolio-media-carousel__viewport { display: flex; width: 100%; min-width: 0; gap: var(--portfolio-media-card-gap); padding: 14px 0 18px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 0; touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.portfolio-media-carousel__viewport::-webkit-scrollbar { display: none; }
.portfolio-media-carousel__item { position: relative; flex: 0 0 var(--portfolio-media-card-width); width: var(--portfolio-media-card-width); height: var(--portfolio-media-card-height); padding: 0; overflow: hidden; box-sizing: border-box; border: 1px solid var(--portfolio-color-line); border-radius: var(--portfolio-media-card-radius); background: transparent; cursor: zoom-in; }
.portfolio-media-carousel__media { display: block; width: auto; height: 100%; max-width: none; box-sizing: border-box; border-radius: inherit; background: var(--portfolio-color-bg); object-fit: contain; transform-origin: center; will-change: transform; transition: transform 180ms ease; }
.portfolio-media-carousel__item:hover, .portfolio-media-carousel__item:focus-visible { z-index: 2; outline: none; }
.portfolio-media-carousel__item:hover .portfolio-media-carousel__media, .portfolio-media-carousel__item:focus-visible .portfolio-media-carousel__media { transform: scale(var(--portfolio-media-card-hover-scale)); }
.portfolio-media-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--portfolio-space-05); background: rgb(0 0 0 / 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.portfolio-media-lightbox.is-open { opacity: 1; pointer-events: auto; }
.portfolio-media-lightbox__panel { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: var(--portfolio-space-05); pointer-events: none; }
.portfolio-media-lightbox__media { display: block; width: auto; height: auto; max-width: min(76vw, 820px); max-height: min(80vh, 900px); border-radius: var(--portfolio-media-card-radius); background: transparent; object-fit: contain; pointer-events: none; transform: scale(0.94); transition: transform 260ms cubic-bezier(0.2, 0, 0, 1); }
.portfolio-media-lightbox__content { display: contents; }
.portfolio-media-lightbox.is-open .portfolio-media-lightbox__media { pointer-events: auto; transform: scale(1); }
.portfolio-media-lightbox__close { position: absolute; z-index: 1; top: 0; right: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--portfolio-color-line); border-radius: 50%; background: var(--portfolio-color-bg); color: var(--portfolio-color-text-strong); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; pointer-events: none; }
.portfolio-media-lightbox.is-open .portfolio-media-lightbox__close { pointer-events: auto; }
body.portfolio-media-lightbox-open { overflow: hidden; }
@media (max-width: 640px) { .portfolio-media-lightbox { padding: var(--portfolio-space-04); } .portfolio-media-lightbox__panel { padding: var(--portfolio-space-04); } .portfolio-media-lightbox__media { max-width: 86vw; max-height: 80vh; } }
@media (prefers-reduced-motion: reduce) { .portfolio-media-carousel__media, .portfolio-media-lightbox, .portfolio-media-lightbox__media { transition: none; } }