website/components/MemberCard.css

52 lines
951 B
CSS

.components__member_card {
display: grid;
grid-template-rows: 1fr auto;
width: 16rem;
aspect-ratio: 1;
box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
border: var(--_border-size) solid transparent;
background-size: 90%;
background-position-x: center;
background-repeat: no-repeat;
&:has(a:focus-visible),
&:hover {
border: var(--_border-size) solid var(--_accent-color);
}
& h3 {
margin: 0;
text-align: center;
}
& a {
outline: none;
}
}
.components__member_card__icon {
height: 100%;
object-fit: cover;
overflow: hidden;
}
.components__member_card__content {
background-color: var(--_translucent-bg);
backdrop-filter: blur(var(--_blur));
display: flex;
flex-direction: column;
padding: var(--_gap-half);
gap: var(--_gap-half);
}
.components__member_card__groups {
display: flex;
flex-wrap: wrap;
gap: var(--_gap-half);
& span {
padding: var(--_gap-half);
background-color: var(--_translucent);
}
}