.fantom-ugc-strip{background-color:var(--fantom-bg);padding:var(--fantom-section-y) 0;overflow:hidden}.fantom-ugc-strip__container{width:100%;max-width:min(100%,1480px);margin:0 auto;padding:0 var(--fantom-gutter)}.fantom-ugc-strip__header{text-align:center;margin-bottom:clamp(32px,5vw,56px)}.fantom-ugc-strip__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background-color:var(--fantom-bg-elevated);border:1px solid rgba(255,255,255,.1);border-radius:var(--fantom-radius-pill);color:var(--fantom-text);font-family:var(--fantom-font-body);font-size:var(--fantom-fs-micro);font-weight:var(--fantom-fw-bold);letter-spacing:var(--fantom-tracking-label);text-transform:uppercase;margin-bottom:16px}.fantom-ugc-strip__heading{font-family:var(--fantom-font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:var(--fantom-fw-display);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;margin:0;color:var(--fantom-text);padding-bottom:.05em}.fantom-ugc-strip__heading-accent{font-family:var(--fantom-font-italic);font-style:italic;font-weight:900;display:inline-block;white-space:nowrap;background-image:linear-gradient(90deg,#ff3d9a,#ff6a3d 17%,#ffd93d 33%,#3dffa0,#22d3ee 67%,#a855f7 83%,#ff3d9a);background-size:300% 100%;background-position:0% 50%;background-repeat:no-repeat;animation:fantom-ugc-shift 7s linear infinite;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:.05em .08em .1em}@keyframes fantom-ugc-shift{0%{background-position:0% 50%}to{background-position:200% 50%}}@media(prefers-reduced-motion:reduce){.fantom-ugc-strip__heading-accent{animation:none}}.fantom-ugc-strip__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}@media(max-width:1023px){.fantom-ugc-strip__grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:639px){.fantom-ugc-strip__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 calc(-1 * var(--fantom-gutter));padding-left:var(--fantom-gutter);padding-right:var(--fantom-gutter);scrollbar-width:none}.fantom-ugc-strip__grid::-webkit-scrollbar{display:none}.fantom-ugc-card{flex:0 0 62%;scroll-snap-align:start}}.fantom-ugc-card{position:relative;display:block;text-decoration:none;color:var(--fantom-text);border-radius:var(--fantom-radius-card);overflow:hidden;isolation:isolate;transition:transform var(--fantom-duration-base) var(--fantom-ease-emphatic)}.fantom-ugc-card:hover,.fantom-ugc-card:focus-visible{transform:translateY(-4px)}.fantom-ugc-card__media{position:relative;aspect-ratio:9 / 16;overflow:hidden;background-color:var(--fantom-bg-elevated)}.fantom-ugc-card__media img,.fantom-ugc-card__media video,.fantom-ugc-card__video{width:100%;height:100%;object-fit:cover}.fantom-ugc-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--fantom-radius-pill);background:#0009;color:var(--fantom-text);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);transition:transform var(--fantom-duration-base) var(--fantom-ease-emphatic);opacity:0}.fantom-ugc-card:hover .fantom-ugc-card__play{opacity:1;transform:translate(-50%,-50%) scale(1.05)}.fantom-ugc-card__placeholder{width:100%;height:100%;border-radius:0;border:none;aspect-ratio:auto}.fantom-ugc-card__meta{position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#0000008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--fantom-radius-pill);font-family:var(--fantom-font-body);font-size:var(--fantom-fs-micro);z-index:2}.fantom-ugc-card__handle{font-weight:var(--fantom-fw-semibold);color:var(--fantom-text)}.fantom-ugc-card__views{font-weight:var(--fantom-fw-bold);color:var(--fantom-text-muted)}.fantom-ugc-strip__cta-wrap{display:flex;justify-content:center;margin-top:clamp(32px,5vw,48px)}
/*# sourceMappingURL=/cdn/shop/t/4/assets/fantom-ugc-strip.css.map */