.c3-employees {
    --c3-employees-spacing: 20px;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin: calc(-1 * var(--c3-employees-spacing)) 0 0 calc(-1 * var(--c3-employees-spacing));
}

.c3-employee {
    width: calc(25% - var(--c3-employees-spacing));
    margin: var(--c3-employees-spacing) 0 0 var(--c3-employees-spacing);
}

/**
 * Employee Card
 */
.c3-employee__card {
    cursor: pointer;
}

.c3-employee__card .c3-employee__image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 125%;
    background-color: #EFEFEF;
}

.c3-employee__card .c3-employee__image img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.c3-employee__card .c3-employee__name {
    display: block;
    margin: 30px 0 4px 0;
    font-family: var(--e-global-typography-secondary-font-family), sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    font-style: italic;
    color: var(--e-global-color-secondary);
    line-height: 1.4;
    letter-spacing: var(--e-global-typography-secondary-letter-spacing);
}

.c3-employee__card .c3-employee__position {
    display: block;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    font-style: var(--e-global-typography-accent-font-style);
    font-size: var(--e-global-typography-accent-font-size);
    color: var(--e-global-color-secondary);
    line-height: 1.2;
    letter-spacing: var(--e-global-typography-accent-letter-spacing);
}

@media (max-width: 767px) {
    .c3-employee {
        width: calc(50% - var(--c3-employees-spacing));
    }

    .c3-employee__card .c3-employee__name {
        margin: 10px 0 4px 0;
    }
}

/**
 * Employee Modal
 */
.c3-employee__modal {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0ms 300ms, opacity 300ms;
}

.c3-employee--clicked .c3-employee__modal {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: visibility 0ms, opacity 300ms;
}

.c3-employee__modal .c3-employee__image,
.c3-employee__modal .c3-employee__content {
    width: 50%;
    height: 100%;
    position: relative;
}

.c3-employee__modal .c3-employee__image {
    background-color: var(--e-global-color-98b1c00);
}

.c3-employee__modal .c3-employee__image:before {
    content: '';
    display: block;
    width: 40px;
    height: 140px;
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 3;
    background: url('data:image/svg+xml,<svg viewBox="0 0 30.498 111.81" xmlns="http://www.w3.org/2000/svg" fill="%23B5D2B4"><path d="m30.498 15.242c0-8.4122-6.8295-15.242-15.256-15.242s-15.242 6.8295-15.242 15.242c0 8.4123 6.8295 15.242 15.242 15.242s15.242-6.8295 15.242-15.242m-3.1069-5.144c0.7181 1.6707 1.0405 3.3268 1.0405 5.144 0 1.8173-0.2784 3.2536-0.9526 4.939-0.6888 1.6853-1.6121 3.0923-2.9018 4.382-1.2897 1.2896-2.4914 2.0957-4.1622 2.8138l-5.1441-12.12 4.939-12.223c1.6853 0.6888 3.0923 1.6121 4.382 2.9018 1.2896 1.2897 2.0957 2.4914 2.8138 4.1768"/><path d="m30.498 55.896c0-8.4123-6.8295-15.242-15.242-15.242-8.4122 0-15.256 6.8295-15.256 15.242 0 8.4122 6.8295 15.242 15.242 15.242s15.242-6.8295 15.242-15.242m-3.1069-5.1441c0.7181 1.6707 1.0405 3.3268 1.0405 5.1441 0 1.8172-0.2784 3.2535-0.9526 4.9389l-12.223-4.9389 12.12-5.1441z"/><path d="m30.498 96.565c0-8.412-6.8295-15.242-15.242-15.242-8.4122 0-15.256 6.8148-15.256 15.242s6.8149 15.242 15.242 15.242 15.242-6.83 15.242-15.242m-2.0664 0.821h-13.175v-1.642h13.175z"/></svg>') center / contain no-repeat;
}

.c3-employee__modal .c3-employee__image img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: opacity 300ms;
}

.c3-employee__modal .c3-employee__image img:nth-child(2) {
    opacity: 0;
}

.c3-employee__modal .c3-employee__image:hover img:nth-child(2) {
    opacity: 1;
}

.c3-employee__modal .c3-employee__content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 600px;
    margin: auto;
    padding: 90px;
    font-family: var(--e-global-typography-accent-font-family), sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    font-style: var(--e-global-typography-accent-font-style);
    font-size: var(--e-global-typography-accent-font-size);
    color: var(--e-global-color-secondary);
    line-height: var(--e-global-typography-accent-line-height);
    letter-spacing: var(--e-global-typography-accent-letter-spacing);
}

.c3-employee__modal .c3-employee__name {
    display: block;
    width: 100%;
    margin: 0;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    font-style: var(--e-global-typography-primary-font-style);
    color: var(--e-global-color-secondary);
    line-height: 1.2;
    letter-spacing: var(--e-global-typography-primary-letter-spacing);
}

.c3-employee__modal .c3-employee__position,
.c3-employee__modal .c3-employee__phone,
.c3-employee__modal .c3-employee__mobile,
.c3-employee__modal .c3-employee__mail,
.c3-employee__modal .c3-employee__bio {
    display: block;
    width: 100%;
}

.c3-employee__modal .c3-employee__position {
    margin-top: 8px;
}

.c3-employee__modal .c3-employee__phone,
.c3-employee__modal .c3-employee__mobile,
.c3-employee__modal .c3-employee__mail,
.c3-employee__modal .c3-employee__bio {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--e-global-color-secondary);
}

.c3-employee__modal .c3-employee__mail a {
    display: inline-block;
    position: relative;
    line-height: 1.2;
}

.c3-employee__modal .c3-employee__mail a:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    opacity: 1;
    transition: width 300ms, opacity 300ms;
}

.c3-employee__modal .c3-employee__mail a:hover:before {
    width: 0;
    opacity: 0;
}

.c3-employee__modal .c3-employee__vcard {
    margin-top: 90px;
}

.c3-employee__modal .c3-employee__vcard a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--e-global-color-secondary);
    border-radius: 20px;
    transition: background-color 300ms, color 300ms;
}

.c3-employee__modal .c3-employee__vcard a:hover {
    background-color: var(--e-global-color-secondary);
    color: #fff;
}

.c3-employee__modal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 40px;
    position: absolute;
    top: 40px;
    right: 40px;
    border: 1px solid var(--e-global-color-secondary);
    border-radius: 80px;
    background-color: rgba(0, 0, 0, 0);
    color: var(--e-global-color-secondary);
    cursor: pointer;
    transition: background-color 300ms, color 300ms;
}

.c3-employee__modal-button:hover {
    background-color: var(--e-global-color-secondary);
    color: #fff;
}

.c3-employee__modal-button svg {
    display: block;
    width: 16px;
    height: auto;
    fill: currentColor;
    transition: fill 300ms;
}