.drkn--team {
gap: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
} .drkn--team__item {
display: flex;
flex-direction: column;
width: 100%;
background-color: var(--color-content-bg);
border: 1px solid var(--color-content-border);
border-radius: 1rem;
overflow: hidden;
}
@media (min-width: 576px) {
.drkn--team--cols-2 .drkn--team__item,
.drkn--team--cols-3 .drkn--team__item,
.drkn--team--cols-4 .drkn--team__item {
width: 50%;
}
}
@media (min-width: 992px) {
.drkn--team--cols-2 .drkn--team__item {
width: 50%;
}
.drkn--team--cols-3 .drkn--team__item,
.drkn--team--cols-4 .drkn--team__item {
width: 33%;
}
}
@media (min-width: 1280px) {
.drkn--team--cols-2 .drkn--team__item {
width: 50%;
}
.drkn--team--cols-3 .drkn--team__item {
width: 33.3%;
}
.drkn--team--cols-4 .drkn--team__item {
width: 25%;
}
} .drkn--team__image {
overflow: hidden;
}
.drkn--team__image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
} .drkn--team__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 2rem;
} .drkn--team__name {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
} .drkn--team__position {
margin: 0;
font-size: 0.9375rem;
color: #666;
} .drkn--team__email,
.drkn--team__phone,
.drkn--team__mobile {
margin: 0;
color: var(--color-content-link);
}
.drkn--team__email a,
.drkn--team__phone a,
.drkn--team__mobile a {
color: inherit;
text-decoration: none;
}
.drkn--team__email a:hover,
.drkn--team__phone a:hover,
.drkn--team__mobile a:hover {
text-decoration: underline;
}