/* ------------------------------ */
/* ------------ Team ------------ */
/* ------------------------------ */

.section__team {
    overflow: hidden;
}

.hover_image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.no-touchevents .person__image:hover .hover_image, .touchevents .person__image.hover .hover_image {
    opacity: 1;
    visibility: visible;
}

.touchevents .person__image {
    cursor: pointer;
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1900px) {

    .person, .job {
        width: calc(25% - calc(var(--spacing-2) * 2));
    }

    .person__info, .job__info {
        margin-top: var(--spacing-3-5);
    }

}


@media all and (max-width: 1899.98px) and (min-width: 768px) {

    .person, .job {
        width: calc(33.3333333% - calc(var(--spacing-2) * 2));
    }

    .person__info, .job__info {
        margin-top: var(--spacing-3);
    }

}


@media all and (min-width: 768px) {

    .team, .jobs {
        margin: calc((var(--spacing-5-5) / 2) * -1) calc(var(--spacing-2) * -1);
    }

    .person, .job {
        margin: calc(var(--spacing-5-5) / 2) var(--spacing-2);
    }
    
    .person__info h2, .job__info h3 {
        margin-bottom: var(--spacing-1);
    }

}


@media all and (max-width: 767.98px) {

    .person__info h2, .job__info h3 {
        margin-bottom: 7px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .team, .jobs {
        margin: calc((var(--spacing-5-5) / 2) * -1) calc(var(--spacing-1) * -1);
    }

    .person, .job {
        width: calc(50% - calc(var(--spacing-1) * 2));
        margin: calc(var(--spacing-5-5) / 2) var(--spacing-1);
    }

    .person__info, .job__info {
        margin-top: 17px
    }

}


@media all and (max-width: 575.98px) {

    .team, .jobs {
        margin: calc((var(--spacing-5-5) / 2) * -1) calc(var(--spacing-2) * -1);
    }

    .person, .job {
        width: calc(100% - calc(var(--spacing-2) * 2));
        margin: calc(var(--spacing-5-5) / 2) var(--spacing-2);
    }

    .person__info, .job__info {
        margin-top: var(--spacing-3);
    }

}