.design-gallery{max-width:1600px;margin:40px auto;padding:0 20px}.gallery-filter-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}.gallery-filter{border:none;background:#f3f3f3;color:#222;padding:10px 18px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;transition:.25s}.gallery-filter:hover{background:#e8e8e8}.gallery-filter.active{background:#111;color:#fff}.design-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.design-gallery-item{display:block;position:relative;overflow:hidden;border-radius:8px;transition:opacity .2s ease,transform .2s ease}.design-gallery-item img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .45s ease}.design-gallery-item:hover img{transform:scale(1.03)}.gallery-empty{text-align:center;padding:60px 20px;font-size:18px;color:#666}@media(max-width:1100px){.design-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){.design-gallery{padding:0 15px}.gallery-filter-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}.gallery-filter-group::-webkit-scrollbar{display:none}.design-gallery-grid{grid-template-columns:1fr}}.gallery-header{text-align:center;margin:10px 0 30px}.gallery-header h1{margin:0;font-size:42px;font-weight:600;line-height:1.2;color:#7a7a7a}.design-gallery-item{position:relative;overflow:hidden}.design-gallery-item img{transition:filter .28s ease,transform .35s ease}.gallery-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:#00000026;transition:opacity .25s ease;pointer-events:none}.gallery-arrow{position:absolute;top:14px;right:14px;color:#fff;font-size:24px;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.25);transform:translateY(-6px);opacity:0;transition:opacity .25s ease,transform .25s ease}.design-gallery-item:hover img{filter:brightness(.85);transform:scale(1.02)}.design-gallery-item:hover .gallery-overlay{opacity:1}.design-gallery-item:hover .gallery-arrow{opacity:1;transform:translateY(0)}@media(hover:none){.gallery-overlay{opacity:1;background:none}.gallery-arrow{position:absolute;right:14px;bottom:14px;width:auto;height:auto;background:none;box-shadow:none;color:#ffffffeb;font-size:20px;text-shadow:0 1px 4px rgba(0,0,0,.3)}}
/*# sourceMappingURL=/cdn/shop/t/34/assets/design-gallery.css.map */