Widget:Gurren
Ir para navegação
Ir para pesquisar
<style>
.social-cards {
display: flex;
flex-wrap: wrap;
gap: 0.75em;
justify-content: center; /* ou flex-start */
margin: 1em 0; /* espaçamento acima/abaixo */
}
.social-card {
flex: 1 1 calc(50% - 1.5em); /* duas cards por linha */
max-width: 220px; /* evita ficar esticado demais */
aspect-ratio: 4 / 1; /* mantém proporção consistente */
border-radius: 0.75em;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
background: url('https://i.imgur.com/3ON2kVj.gif') center/cover no-repeat;
}
.social-card::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(114, 137, 218, 0.6);
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: rgba(114, 137, 218, 0.8);
}
.social-card-content {
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 0 1em;
color: #fff;
}
.social-icon {
width: 2em;
height: 2em;
margin-right: 0.75em;
}
.social-name {
font-size: 1.1em;
font-weight: bold;
}
</style>