.wp-block-about-fcounts {

    .blurbs {
        position: relative;
        background-color: var(--deep-sky-blue);

        .icon-pattern {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: grid;
            gap: 60px;
        }

        .inner-container {
            position: relative;
            z-index: 3;
            width: 70%;
            margin: 0 auto;
            padding: 142px 0 203px 0;
            display: flex;
            flex-direction: column;
            gap: 50px;

            @media (min-width: 600px) {
                padding: 142px 0 253px 0;
            }

            @media (min-width: 728px) {
                padding: 142px 0 293px 0;
            }

            @media (min-width: 1024px) {
                width: 61%;
                padding: 142px 0 323px 0;
                flex-direction: row;
                gap: 98px;
            }
        }

        .title-container {
            position: relative;

            .icon {
                position: absolute;
                left: 0;
                top: 0;
                transform: translate(calc(-100% - 6px), 10px);

                @media (min-width: 768px) {
                    transform: translate(calc(-100% - 32px), 10px);
                }
            }

            .title {
                color: var(--yellow);
                font-family:"Museo Sans";
                font-size: 2.375rem;
                font-style: normal;
                font-weight: 600;
                line-height: 125%;

                @media (min-width: 1024px) {
                    font-size: 2.5rem;
                }
            }
        }

        .body {
            margin-top: 23px;
            color: #FFF;
            font-family:"Museo Sans";
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: 120%;

            @media (min-width: 1024px) {
                font-size: 1.125rem;
            }
        }
    } /* blurbs */

    .video {
        position: relative;
        z-index: 3;

        .video-container {
            position: absolute;
            left: 50%;
            top: 0;
            width: var(--desktop-container-width);
            aspect-ratio: 1.76;
            border-radius: 8px;
            transform: translate(-50%, -50%);

            @media (min-width: 1024px) {
                width: 61%;
            }

            .embedded {
                width: 100%;
                aspect-ratio: 1.76;
                border-radius: 8px;

                iframe {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 8px;
                }
            }

            .image-container {
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                width: 100%;
                aspect-ratio: 1.76;
                border-radius: 8px;
                background-size: cover;
                background-position: center;
                cursor: pointer;
            }

            .play-container {
                position: absolute;
                z-index: 5;
                left: 44px;
                bottom: 33px;
                transition: opacity 300ms ease-in;
                cursor: pointer;

                svg {
                    width: 70px;
                    height: 70px;

                    @media (min-width: 768px) {
                        width: 108px;
                        height: 108px;
                    }
                }

                svg rect {
                    transition: stroke 200ms ease-in;
                }

                svg path {
                    transition: fill 200ms ease-in;
                }
            }

            &:hover {

                .play-container svg {

                    rect {
                        stroke: var(--yellow);
                    }

                    path {
                        fill: var(--yellow);
                    }
                }
            }
        }
    } /* video */

    .staff {
        background-color: var(--linen);

        .inner-container {
            width: var(--desktop-container-width);
            margin: 0 auto;
            padding: 212px 0 41px 0;

            @media (min-width: 768px) {
                padding: 412px 0 41px 0;
            }
        }

        .headline {
            color: var(--deep-sky-blue);
            text-align: center;
            font-family:"Museo Sans";
            font-size: 1.875rem;
            font-style: normal;
            font-weight: 600;
            line-height: 120%;
        }

        .members {
            margin-top: 47px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;

            @media (min-width: 1024px) {
                grid-template-columns: repeat(4, 1fr);
            }

            .member {
                cursor: pointer;

                .image-container {
                    width: 100%;
                    aspect-ratio: 1.0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .info-container {
                    margin-top: 18px;

                    .name {
                        color: #141B34;
                        font-family:"Museo Sans";
                        font-size: 1.125rem;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 120%;
                        transition: all 200ms ease-in;
                    }

                    .title {
                        margin-top: 6px;
                        color: #000;
                        font-family:"Museo Sans";
                        font-size: 0.75rem;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 120%;
                        text-transform: uppercase;
                        transition: all 200ms ease-in;
                    }

                    .bio {
                        display: none;
                    }
                }

                &:hover {

                    .name,
                    .title {
                        color: var(--deep-sky-blue);
                    }
                }
            } /* member */
        } /* members */
    } /* staff */
}

.staff-bio-overlay {
    display: none;
    position: absolute;
    z-index: 60;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: #000000aa;

    .staff-bio-popup {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 90%;
        transform: translate(-50%, -50%);
        background-color: var(--deep-sky-blue);
        border: 2px solid #47505C;

        .inner-container {
            padding: 30px;

            @media (min-width: 768px) {
                padding: 80px;
            }

            .content-container {

                @media (min-width: 1024px) {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                }
            }

            .pager-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .image-panel {
            width: 60%;

            @media (min-width: 1024px) {
                width: 30%;
            }

            img {
                width: 100%;
                aspect-ratio: 1.0;
                object-fit: cover;
            }
        }

        .info-panel {
            width: 100%;
            margin-top: 20px;
            font-family:"Museo Sans";
            font-style: normal;
            line-height: 120%;

            @media (min-width: 1024px) {
                width: 65%;
                margin-top: 0;
            }

            .name {
                font-size: 1.5rem;
                font-weight: 500;
                color: var(--yellow);
            }

            .title {
                margin-top: 6px;
                font-size: 1.125rem;
                font-weight: 500;
                color: var(--yellow);
            }

            .bio {
                font-size: 1rem;
                font-weight: 400;
                color: #fff;
            }
        }

        .pager-container {
            margin-top: 48px;

            .pager {
                display: flex;
                align-items: center;
                gap: 8px;
                font-family:"Museo Sans";
                font-size: 1rem;
                font-weight: 400;
                font-style: normal;
                line-height: 120%;
                color: var(--yellow);
                cursor: pointer;

                .arrow {
                    width: 24px;
                    height: 24px;
                    fill: var(--yellow);
                }

                &.prev {

                    .arrow {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        .close {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 4px 8px;
            border: 8px solid #47505C;
            cursor: pointer;
            transition: all 200ms ease-in;

            .line {
                stroke: #47505C;
            }

            &:hover {
                border-color: var(--yellow);

                .line {
                    stroke: var(--yellow);
                }
            }
        }
    }
}