.team-wot {
    --team-wot-gap: 4em;
    gap: var(--team-wot-gap);
    margin-top: 2em;
}
.team-wot-item {
    position: relative;
    -webkit-box-flex: calc(50% - var(--team-wot-gap));
        -ms-flex: calc(50% - var(--team-wot-gap));
            flex: calc(50% - var(--team-wot-gap));
    background-image: -webkit-gradient(linear, left top, left bottom, from(#303030), color-stop(#666666), to(#303030));
    background-image: -o-linear-gradient(top, #303030, #666666, #303030);
    background-image: linear-gradient(180deg, #303030, #666666, #303030);
}
.team-wot-item img {
    display: block;
    margin: 1em auto 0 auto;
    height: 30rem;
    width: auto;
}
.team-wot-item .label, .team-wot-item .role {
    font-family: 'Cera Pro', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--light-text);
}
.team-wot-item .label {
    position: absolute;
    top: 2em;
    left: -0.4em;
    background-color: var(--topMenu);
    padding: 0.4em 1em;
}
.team-wot-item .role {
    background-color: var(--nav-bg);
}
.team-wot-item .role a {
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    background: url(/templates/Wot/images/envelop.svg) no-repeat;
    background-position: calc(100% - 1em) center;
    background-size: auto 60%;
    color: inherit;
    -webkit-transition: background-size 150ms ease;
    -o-transition: background-size 150ms ease;
    transition: background-size 150ms ease;
}

@media screen and (max-width: 1200px) {
    .team-wot-item img {
        height: 28rem;
    }
    .team-wot-item .label, .team-wot-item .role {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 768px) {
    .team-wot-item img {
        height: 23rem;
    }
    .team-wot-item .label {
        top: 1em;
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 650px) {
    .team-wot {
        gap: 2em;
    }
    .team-wot-item {
        -webkit-box-flex: 100%;
            -ms-flex: 100%;
                flex: 100%;
    }
}