Widget:Gurren
<style> .social-cards { display: flex; flex-wrap: wrap; gap: 0.25em; /* espaçamento mínimo entre cards */ }
.social-card { flex: 1 1 100%; /* ocupa 100% da coluna no desktop */ aspect-ratio: 5 / 1; /* proporção padrão */ margin: 0.25em 0; /* espaçamento vertical */ border-radius: 0.75em; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; background: var(--bg-url) center/cover no-repeat; }
.social-card::before { content: ""; position: absolute; inset: 0; background-color: var(--overlay, rgba(0, 0, 0, 0.4)); mix-blend-mode: multiply; pointer-events: none; transition: background-color 0.2s; }
.social-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }
.social-card:hover::before { background-color: var(--overlay-hover, rgba(0, 0, 0, 0.6)); }
.social-card-content { position: relative; display: flex; align-items: center; justify-content: flex-start; /* esquerda */ height: 100%; padding: 0 1em; color: #fff; }
.social-icon { width: 1.8em; height: 1.8em; margin-right: 0.75em; }
.social-name { font-size: 1.1em; font-weight: bold; }
/* classes para cada rede (mantém seus fundos e overlays) */ .social-card.discord { /* ... */ }
.social-card.instagram { /* ... */ }
.social-card.facebook { /* ... */ }
.social-card.tiktok { /* ... */ }
/* MOBILE: 2 por linha e cards mais “baixos” */ @media (max-width: 600px) { .social-card { flex: 1 1 calc(50% - 0.25em); /* duas colunas */ aspect-ratio: 6 / 1; /* mais fino */ margin: 0.125em; /* reduz um pouco o gap */ } } </style>