Widget:Gurren
<style> .social-cards { display: flex; flex-wrap: wrap; gap: 0.5em; }
.social-card { flex: 1 1 100%; aspect-ratio: 5 / 1; margin: 0.5em 0; border-radius: 0.75em; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; 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 ease; }
.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; 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; }
/* custom backgrounds e overlays */ .social-card.discord { --bg-url: url('https://i.imgur.com/3ON2kVj.gif'); --overlay: rgba(114, 137, 218, 0.6); --overlay-hover: rgba(114, 137, 218, 0.8); }
.social-card.instagram { --bg-url: url('https://i.imgur.com/ZXQ7wq3.jpg'); --overlay: rgba(193, 53, 132, 0.6); --overlay-hover: rgba(193, 53, 132, 0.8); }
.social-card.facebook { --bg-url: url('https://i.imgur.com/9bGkq7Y.jpg'); --overlay: rgba(24, 119, 242, 0.6); --overlay-hover: rgba(24, 119, 242, 0.8); }
.social-card.tiktok { --bg-url: url('https://i.imgur.com/oY0Z4PMC.jpg'); --overlay: rgba(0, 0, 0, 0.6); --overlay-hover: rgba(0, 0, 0, 0.8); }
/* RESPONSIVO: em telas até 600px, 2 cards por linha e mais finos */ @media (max-width: 600px) { .social-card { flex: 1 1 calc(50% - 0.5em); aspect-ratio: 8 / 1; /* mais fino */ } } </style>