.ugc-section{padding:2rem 0;background:var(--color-background, #fafafa)}.ugc-container{max-width:1200px;margin:0 auto;padding:0 1rem}.ugc-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:0 .5rem}.ugc-icon{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--color-foreground, #333);flex-shrink:0}.ugc-icon svg{width:100%;height:100%}.ugc-title{font-size:1.125rem;font-weight:600;color:var(--color-foreground, #333);margin:0 auto 0 0;line-height:1.2}.ugc-hashtag{color:var(--color-link, #0095f6);font-size:.875rem;font-weight:400}.ugc-status-indicator{font-size:.75rem;color:#666;margin-bottom:1rem;padding:.5rem .75rem;background:#f8f9fa;border-radius:.375rem;border-left:3px solid var(--color-link, #0095f6);font-family:monospace}.ugc-status-indicator.error{color:#e74c3c;background:#fdf2f2;border-left-color:#e74c3c}.ugc-grid{display:grid;gap:.25rem;opacity:0;transform:translateY(1rem);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}.ugc-grid.loaded{opacity:1;transform:none}.ugc-grid[data-columns-desktop="2"]{grid-template-columns:repeat(2,1fr)}.ugc-grid[data-columns-desktop="3"]{grid-template-columns:repeat(3,1fr)}.ugc-grid[data-columns-desktop="4"]{grid-template-columns:repeat(4,1fr)}.ugc-grid[data-columns-desktop="5"]{grid-template-columns:repeat(5,1fr)}.ugc-grid[data-columns-desktop="6"]{grid-template-columns:repeat(6,1fr)}.ugc-grid[data-columns-desktop="7"]{grid-template-columns:repeat(7,1fr)}.ugc-grid[data-columns-desktop="8"]{grid-template-columns:repeat(8,1fr)}.ugc-card{position:relative;aspect-ratio:1;background:#fff;border-radius:.5rem;overflow:hidden;cursor:pointer;opacity:0;transform:scale(.9);transition:all .4s cubic-bezier(.25,.46,.45,.94);will-change:transform,opacity}.ugc-card.visible{opacity:1;transform:scale(1)}.ugc-card:hover{transform:scale(1.02);box-shadow:0 .5rem 1.5rem #00000026;z-index:10}.ugc-card:focus{outline:2px solid var(--color-link, #0095f6);outline-offset:2px}.ugc-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.ugc-card:hover .ugc-image{transform:scale(1.05)}.ugc-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);color:#fff;padding:1rem .75rem .75rem;transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.ugc-card:hover .ugc-overlay,.ugc-card:focus .ugc-overlay{transform:translateY(0)}.ugc-caption{font-size:.8125rem;line-height:1.3;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.ugc-user{font-size:.6875rem;opacity:.9;font-weight:500}.ugc-user:before{content:"by "}.ugc-loading{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;padding:3rem 1rem;color:#666}.ugc-loading-text{font-size:.875rem}.ugc-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:ugc-shimmer 1.5s infinite}@keyframes ugc-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ugc-error{grid-column:1 / -1;padding:2rem;text-align:center;color:#e74c3c;background:#fdf2f2;border-radius:.5rem;border:1px solid #fecaca}@media (max-width: 1199px){.ugc-grid[data-columns-desktop="2"][data-columns-tablet="2"],.ugc-grid[data-columns-desktop="3"][data-columns-tablet="2"]{grid-template-columns:repeat(2,1fr)}.ugc-grid[data-columns-desktop="4"][data-columns-tablet="3"]{grid-template-columns:repeat(3,1fr)}.ugc-grid[data-columns-desktop="5"][data-columns-tablet="4"],.ugc-grid[data-columns-desktop="6"][data-columns-tablet="4"]{grid-template-columns:repeat(4,1fr)}.ugc-container{padding:0 .75rem}.ugc-title{font-size:1rem}}@media (max-width: 767px){.ugc-grid[data-columns-mobile="2"]{grid-template-columns:repeat(2,1fr)}.ugc-grid[data-columns-mobile="3"]{grid-template-columns:repeat(3,1fr)}.ugc-grid[data-columns-mobile="4"]{grid-template-columns:repeat(4,1fr)}.ugc-section{padding:1.5rem 0}.ugc-container{padding:0 .5rem}.ugc-header{gap:.5rem;margin-bottom:1rem}.ugc-title{font-size:.875rem}.ugc-hashtag{font-size:.75rem}.ugc-grid{gap:.125rem}.ugc-overlay{padding:.75rem .5rem .5rem}.ugc-caption{font-size:.75rem}.ugc-user{font-size:.625rem}}@media (max-width: 480px){.ugc-header{flex-wrap:wrap}.ugc-hashtag{order:3;flex-basis:100%;margin-top:.25rem}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.ugc-card{backface-visibility:hidden;transform:translateZ(0)}}@media (prefers-reduced-motion: reduce){.ugc-grid,.ugc-card,.ugc-image,.ugc-overlay{transition:none}.ugc-skeleton{animation:none;background:#f0f0f0}}@media (prefers-color-scheme: dark){.ugc-section{background:var(--color-background, #1a1a1a)}.ugc-title,.ugc-icon{color:var(--color-foreground, #fff)}.ugc-status-indicator{background:#2a2a2a;color:#ccc}.ugc-card{background:#2a2a2a}.ugc-skeleton{background:linear-gradient(90deg,#2a2a2a 25%,#3a3a3a,#2a2a2a 75%)}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/ugc-grid.css.map */