.hihi-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 4px; }
.hihi-gallery-card { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 12px; background: #1d292c; cursor: zoom-in; aspect-ratio: 4/3; }
.hihi-gallery-card:first-child { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
.hihi-gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hihi-gallery-card:hover img { transform: scale(1.05); }
.hihi-gallery-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: clamp(24px,4vw,40px); font-weight: 800; pointer-events: none; }
.hihi-gallery-modal[hidden] { display: none; }
.hihi-gallery-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; background: rgba(29,41,44,.85); backdrop-filter: blur(4px); }
.hihi-gallery-modal__content { position: relative; display: flex; width: 100%; max-width: 900px; max-height: 90vh; flex-direction: column; align-items: center; }
.hihi-gallery-modal__image { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: 12px; object-fit: contain; user-select: none; }
.hihi-gallery-modal__close, .hihi-gallery-modal__nav button { display: grid; place-items: center; border: 1.5px solid rgba(242,242,240,.4); border-radius: 50%; background: rgba(242,242,240,.15); color: #f2f2f0; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.hihi-gallery-modal__close:hover, .hihi-gallery-modal__nav button:hover { background: rgba(242,242,240,.3); transform: scale(1.06); }
.hihi-gallery-modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; }
.hihi-gallery-modal__nav { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.hihi-gallery-modal__nav button { width: 40px; height: 40px; }
.hihi-gallery-modal__nav span { min-width: 48px; color: rgba(242,242,240,.7); font-size: 13px; text-align: center; }
body.hihi-gallery-modal-open { overflow: hidden; }
@media (max-width: 700px) { .hihi-gallery-grid { grid-template-columns: repeat(2, 1fr); } .hihi-gallery-card:first-child { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16/9; } }
@media (prefers-reduced-motion: reduce) { .hihi-gallery-card img, .hihi-gallery-modal button { transition: none; } }