.t-card__img {
    object-fit: cover;
    object-position: top;
}
.t-card__image {
    overflow: hidden;
    border-radius: 50%;
    width: 12.5rem;
    height: 12.5rem;
    display: block;
}
@media only screen and (min-width: 1200px) {
    .t-card__image {
        /*width: 20.75rem;*/
        /*height: 20.75rem;*/
        width: 100%!important;
        height: 0!important;
        padding-bottom: 100%!important;
    }
}

/* 3D flip: скрываем лицевую сторону (фото) при rotateY(180deg),
 * чтобы была видна задняя сторона bf-circle::after (чёрный фон + лого).
 * Без этого фото "просвечивает" через заднюю сторону (backface-visibility
 * по умолчанию visible). */
.animation .t-card__image {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.t-card__content {
    padding-top: 1.25rem;
}
@media only screen and (min-width: 1200px) {
    .t-card__content {
        padding-top: 3.125rem;
    }
}

/* Skeleton-placeholder для карточек команды.
 * Логика инвертирована для совместимости с композитным кешем Bitrix:
 * — skeleton показывается по умолчанию (через :not(.is-loaded))
 * — класс is-loaded НЕ присутствует в серверном HTML → не попадает в кеш
 * — JS (script.js) добавляет .is-loaded после загрузки картинки
 * GPU-composited: анимируем transform псевдоэлемента */
@keyframes t-skel-pulse {
    0%   { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(100%, 0, 0); }
}

.t-card__image:not(.is-loaded) {
    position: relative;
    background: #e8e8e8;
}
.t-card__image:not(.is-loaded)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(232, 232, 232, 0) 0%,
        rgba(244, 244, 244, 1) 50%,
        rgba(232, 232, 232, 0) 100%
    );
    transform: translate3d(-100%, 0, 0);
    will-change: transform;
    animation: t-skel-pulse 1.4s ease-in-out infinite;
    pointer-events: none;
}

/* Плавное появление после загрузки */
.t-card__image picture,
.t-card__image img {
    transition: opacity 0.35s ease;
}

/* Не мигаем при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .t-card__image:not(.is-loaded)::after {
        animation: none;
        display: none;
    }
    .t-card__image picture,
    .t-card__image img {
        transition: none;
    }
}