/* ========================================
   GENERAL
======================================== */
.person-container.opacity {
    opacity: .4;
}

.bio-wrapper {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 24px;
    grid-auto-flow: row dense;
    margin-bottom:40px;
}
    /* Person container adjustments */
    .bio-wrapper .person-container:nth-child(2n+7) {
        margin-top: 24px;
    }

    .bio-wrapper .person-container {
        background-color: #f2f2f2;
        position: relative;
        transition: opacity 500ms;
    }
    /* ========================================
   IMAGE STYLES
======================================== */
    .bio-wrapper .person-image {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

        .bio-wrapper .person-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    /* ========================================
   TEXT & CAPTION
======================================== */
    .bio-wrapper .person-caption {
        position: relative;
    }

    .bio-wrapper .person-name {
        padding: 15px;
        text-transform: uppercase;
        hyphens: auto;
        border-top: 2px solid #f2f2f2;
        font-size: 18px;
        font-weight: 400;
    }

    .bio-wrapper .openbnt .person-name {
        border-top: 2px solid #ce1140;
    }

    .bio-wrapper .person-title {
        padding: 0 15px 15px 15px;
        hyphens: auto;
        font-size: 16px;
    }

    .bio-wrapper .bio-h4-style {
        text-transform: uppercase;
        position: relative;
        font-size: 20px;
        line-height: 1;
        color: #373a36;
        padding-bottom: 12px;
        margin-bottom: 10px;
        font-family: "Nord-Con", sans-serif;
        font-weight: 700;
    }

        .bio-wrapper .bio-h4-style:after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 40px;
            height: 2px;
            background: #373a36;
        }
    /* ========================================
   BUTTONS
======================================== */
    .bio-wrapper .person-button {
        display: block;
        margin: 0 0 10px 15px;
        float: right;
        width: 80px;
        height: 50px;
        background-color: #d6d6d6;
        text-align: center;
        cursor: pointer;
        position: relative;
        border-top: 2px solid #d6d6d6;
        z-index: 2;
    }

    .bio-wrapper .openbnt .person-button {
        border: 2px solid #ce1140;
        background-color: #fff;
        color: #ce1140;
    }

    .bio-wrapper .person-button::after {
        display: inline-block;
        margin: 0 12px 0 13px;
        background: url(../../content/images/icon-sprites-fallback.png);
        background-image: linear-gradient(transparent, transparent), url(../../content/images/icon-sprites-vector.svg);
        background-size: 58em 28em;
        background-position: -8em -8em;
        width: 1em;
        height: 1em;
        content: "";
        position: absolute;
        left: 19px;
        top: 15px;
    }

    .bio-wrapper .openbnt .person-button::after {
        background-position: -14em -8em;
        left: 17px;
    }

    .bio-wrapper .person-button:hover::after {
        background-position: -10em -8em;
    }

    .bio-wrapper .openbnt .person-button:hover::after {
        background-position: -16em -8em;
        left: 17px;
    }
    /* ========================================
   BIO CONTENT
======================================== */
    .bio-wrapper .person-bio-container-text {
        margin-top: 25px;
    }

    .bio-wrapper .person-bio-text {
        max-width: 50rem;
    }

    .bio-wrapper .person-bio {
        grid-column-start: 1;
        grid-column-end: span 3;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 500ms;
    }

        .bio-wrapper .person-bio.open {
            grid-template-rows: 1fr;
        }

    .bio-wrapper .person-bio-row {
        overflow: hidden;
    }

    .bio-wrapper .person-bio-container {
        overflow: hidden;
        margin-top: 0;
    }

        .bio-wrapper .person-bio-container .person-bio-container-sub {
            background-color: #f2f2f2;
            padding: 40px 80px;
            margin-top: 24px;
        }
    /* ========================================
   CAROUSEL
======================================== */
    .bio-wrapper .bio-carouselscroll {
        display: none;
    }
/* ========================================
   BACKGROUND VARIATIONS
======================================== */
.container-layout.background-grey .bio-wrapper .person-container {
    background-color: #ffffff;
}

.container-layout.background-grey .bio-wrapper .person-bio-container .person-bio-container-sub {
    background-color: #ffffff;
}
/* ========================================
   MEDIA QUERIES
======================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .bio-wrapper {
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }

        .bio-wrapper .person-container:nth-child(2n+5) {
            margin-top: 16px;
        }

        .bio-wrapper .person-bio {
            grid-column-end: span 2;
        }

        .bio-wrapper .person-bio-container-media {
            margin-top: 16px;
        }

        .bio-wrapper .person-bio-container .person-bio-container-sub {
            margin-top: 16px;
            padding: 40px;
        }
}

@media (max-width: 480px) {
    .bio-wrapper {
        grid-template-columns: 1fr;
    }

        .bio-wrapper .person-container:nth-child(2n+1) {
            margin-top: 16px;
        }

    .person-bio-name {
        display: none;
    }

    .person-bio-container-sub {
        padding: 0 15px 40px 15px !important;
    }

    .bio-wrapper .person-bio-container {
        background-color: #f2f2f2;
    }

    .bio-wrapper .person-bio {
        grid-column-end: 1;
        display: none;
    }

        .bio-wrapper .person-bio.open {
            display: block;
           
        }
    /* Mobile carousel */
    .bio-carousel.mobile-bio-carousel .bio-wrapper .person-container {
        display: none;
        margin-top: 0;
    }

    .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-mobile {
        display: block;
    }

    .bio-carousel.mobile-bio-carousel .bio-wrapper .person-bio-container-media {
        margin-top: 0;
    }

    .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll {
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky;
        bottom: 0;
        background-color: white;
        padding: 10px 0;
    }

    .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-prev, .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-next {
        display: inline-block;
        width: 1em;
        height: 1.5em;
        opacity: 0.6;
        background: url(../../content/images/icon-sprites-fallback.png);
        background-image: linear-gradient(transparent, transparent), url(../../content/images/icon-sprites-vector.svg);
        background-size: 58em 28em;
    }

    .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-prev {
        margin-right: 24px;
        background-position: -16em -16em;
    }

        .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-prev:hover {
            background-position: -20em -16em;
        }

    .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-next {
        margin-left: 28px;
        background-position: -26em -16em;
    }

        .bio-carousel.mobile-bio-carousel .bio-wrapper .bio-carouselscroll-next:hover {
            background-position: -22em -16em;
        }
}