Widget:Gurren

<style>

 .social-card {
   display: block;
   width: 100%;
   aspect-ratio: 5 / 1;             /* menos alto que 4/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;   /* alinhado à 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;
 }

 /* 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);
 }

</style>

<a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener">

   <img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon"/>
   Discord

</a>

<a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener">

   <img src="https://cdn.simpleicons.org/Instagram/ffffff" alt="Instagram" class="social-icon"/>
   Instagram

</a>

<a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener">

   <img src="https://cdn.simpleicons.org/Facebook/ffffff" alt="Facebook" class="social-icon"/>
   Facebook

</a>

<a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener">

   <img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon"/>
   TikTok

</a>