.creators-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(14px, 2.2vw, 28px);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 1000px) {
.creators-grid { grid-template-columns: repeat(6, 1fr); }
.creator { grid-column: span 2; }
.creator:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
.creators-grid { grid-template-columns: repeat(4, 1fr); row-gap: 28px; }
.creator, .creator:nth-child(4) { grid-column: span 2; }
.creator:nth-child(5) { grid-column: 2 / span 2; }
}
.creator {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 8px 4px 12px;
color: inherit;
text-decoration: none;
}
.creator-avatar {
display: block;
width: clamp(96px, 21vw, 144px);
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
margin-bottom: 20px;
border: 3px solid var(--night-ink);
background: var(--surface-2);
box-shadow: 0 5px 0 var(--night-ink);
transition:
transform var(--t) var(--e-out),
box-shadow var(--t) var(--e-out);
}
.creator-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
.creator:hover .creator-avatar {
transform: translateY(-4px);
box-shadow: 0 9px 0 var(--night-ink);
}
.creator:hover .creator-name { color: var(--accent); }
}
.creator:focus-visible .creator-avatar {
transform: translateY(-4px);
box-shadow: 0 9px 0 var(--night-ink);
}
.creator:focus-visible .creator-name { color: var(--accent); }
.creator-name {
max-width: 100%;
font-family: var(--font-pixel);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
font-synthesis: none;
color: var(--text);
overflow-wrap: anywhere;
transition: color var(--t-fast);
}
.creator-subs {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin-top: 12px;
padding: 4px 12px 5px;
border: 2px solid var(--night-ink);
border-radius: var(--r-pill);
background: linear-gradient(180deg, var(--slab-icon-top), var(--slab-icon-bot));
box-shadow: 0 3px 0 var(--night-ink);
color: var(--accent);
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 360px) {
.creators-grid { column-gap: 10px; }
.creator { padding-left: 0; padding-right: 0; }
.creator-subs {
white-space: normal;
text-wrap: balance;
padding: 4px 8px 5px;
font-size: 10.5px;
letter-spacing: .02em;
}
}
@media (prefers-reduced-motion: reduce) {
.creator-avatar { transition: none; }
.creator:hover .creator-avatar,
.creator:focus-visible .creator-avatar { transform: none; box-shadow: 0 5px 0 var(--night-ink); }
}
.creator-subs {
margin-top: 12px;
padding: 6px 14px;
border: 1px solid var(--btn-hairline);
background: linear-gradient(180deg, var(--slab-dark), color-mix(in srgb, var(--slab-dark) 72%, var(--night-ink)));
box-shadow: 0 1px 0 var(--btn-top-light-lo) inset, 0 2px 6px var(--btn-shadow-far);
font-family: var(--font-clean);
font-size: 14.5px;
font-weight: 700;
letter-spacing: -.005em;
text-transform: none;
}
@media (max-width: 359px) {
.creator-subs { padding: 5px 9px; font-size: 12.5px; letter-spacing: 0; }
}