.gallery-container{container-type:inline-size;container-name:gallery;width:100%;margin:0 auto;padding:calc(var(--header-height) + 40px) 20px 40px 20px;min-height:calc(100vh - 80px)}.gallery-title{text-align:center;font-size:clamp(2rem,1.5rem + 2cqi,2.5rem);color:var(--text-color);margin-bottom:8px;font-weight:700}.gallery-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:32px;font-size:1rem}.cards-section{margin-bottom:48px}.cards-section:last-child{margin-bottom:0}.section-title{font-size:1.25rem;font-weight:600;color:var(--text-secondary);margin-bottom:20px;padding-left:16px;border-left:4px solid var(--primary-color)}.cards-grid--horizontal{display:grid;grid-template-columns:repeat(auto-fill,280px);gap:24px;justify-content:center;padding:0 16px}.card-item--horizontal{width:100%}.card-item--horizontal .card-preview{aspect-ratio:91 / 55}.cards-grid--vertical{display:grid;grid-template-columns:repeat(auto-fill,200px);gap:24px;justify-content:center;padding:0 16px}.card-item--vertical{width:100%}.card-item--vertical .card-preview{aspect-ratio:55 / 91}.card-item{background:var(--card-bg);border-radius:16px;overflow:hidden;cursor:pointer;transition:box-shadow .3s ease;box-shadow:0 4px 20px #0000001a}.card-item:hover{box-shadow:0 12px 40px #0003}.card-preview{position:relative;overflow:hidden;background:linear-gradient(135deg,#f5f5f5,#e0e0e0)}.card-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.card-item:hover .card-image{transform:scale(1.05)}.card-overlay{position:absolute;inset:0;background:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .3s ease}.card-item:hover .card-overlay{opacity:1}.view-text{color:#fff;font-size:1rem;font-weight:600;padding:10px 20px;background:var(--card-theme, var(--primary-color));border-radius:8px;transition:background .2s ease}.card-meta{display:flex;justify-content:center;gap:8px;font-size:.8rem;flex-wrap:wrap}.card-version{font-family:monospace;background:#fff3;color:#fff;padding:2px 8px;border-radius:4px;font-size:.75rem}.card-date{color:#fffc}@container gallery (min-width: 600px){.gallery-subtitle{margin-bottom:40px}.view-text{font-size:1.1rem;padding:12px 24px}}@media(hover:none){.card-overlay{opacity:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%)}.card-item:active .card-overlay{opacity:1}.card-item:hover{transform:none}.card-item:active{transform:scale(.98)}}