:root {
    /* colors */
    --dk-blue: #103366;
    --lt-blue: #b8cfe7;
    --white: #ffffff;
}

/* 
    staff hero styling
*/

.videoSection {
    margin: 2em auto 3em auto;
}

.staff-tagline-text {
    background: var(--dk-blue);
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-weight: 600;
    color: var(--white);
    padding: 1em 1.25em 1em 1.7em;
    min-height: 100%;
    display: grid;
    place-items: center;
    font-size: 0.75em;
}

.staff-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
}

.staff-one, .staff-two, .staff-three, .staff-four, .staff-five, .staff-six, .staff-seven, .staff-eight {
    display: grid;
    place-items: center;
}

.staff-one {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}

.staff-two {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
}

.staff-four {
    grid-column: 3 / 3;
    grid-row: 1 / 1;
}

.staff-three {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
}

.staff-tagline {
    grid-column: 1 / 1;
    grid-row: 2 / 2;
    display: flex;
    justify-content: center;
}

.staff-logo {
    display: none;
}

.staff-six {
    grid-column: 2 / 2;
    grid-row: 3/ 3;
}

.staff-seven {
    grid-column: 1 / 1;
    grid-row: 3 / 3;
}

.staff-eight {
    grid-column: 2 / 2;
    grid-row: 3 / 3;
}

.staff-five {
    grid-column: 3 / 3;
    grid-row: 3 / 3;
}

/* 
    subheader styling
*/

.subheader-text:link {
    font-size: 1.35em;
    font-weight: 600;
    font-style: italic;
    color: var(--white);
}

.subheader-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.subheader-play-icon {
    order: 2;
}

.subheader-play-icon img {
    max-height: 75px;
}

/* 
    decorative blocks
*/

.decor-blocks-container {
    position: relative;
}

.decor-blocks {
    position: absolute;
    top: -66px;
}

/* 
    responsive
*/

@media only screen and (min-width: 480px) {
    .staff-tagline-text {
        font-size: 1rem;
        padding: 1rem;
    }
    .subheader-text-container {
        margin-left: 50px;
    }
    .subheader-play-icon {
        margin-left: -5px;
    }
}

@media only screen and (min-width: 500px) {
    .staff-tagline-text {
        max-width: 212px;
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 768px) {
    .staff-tagline-text {
        font-size: 1.4rem;
    }
    .subheader-text:link {
        font-size: 1.75rem;
    }
}

@media only screen and (min-width: 992px) {
    /* 
    staff hero styling
    */
    .staff-container {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 0.75em 0.75em;
    }
    .staff-one {
        grid-column: 1 / 2;
        grid-row: 1 / 1;
    }
    .staff-two {
        grid-column: 3 / 3;
        grid-row: 1 / 1;
    }
    .staff-three {
        grid-column: 4 / 4;
        grid-row: 1 / 1;
    }
    .staff-four {
        grid-column: 1 / 1;
        grid-row: 2 / 2;
    }
    .staff-five {
        grid-column: 2 / 2;
        grid-row: 2 / 2;
    }
    .staff-logo {
        grid-column: 3 / 5;
        grid-row: 2 / 2;
        display: grid;
        place-items: center;
    }
    .staff-six {
        grid-column: 5 /5;
        grid-row: 3 / 3;
    }
    .staff-seven {
        grid-column: 2 / 2;
        grid-row: 3 / 3;
    }
    .staff-eight {
        grid-column: 3 / 3;
        grid-row: 3 / 3;
    }
    .staff-tagline {
        grid-column: 5 / 5;
        grid-row: 2 / 2;
    }
    /* 
    subheader styling
    */
    .subheader-container {
        display: block;
    }
    .subheader-play-icon, .subheader-text-container {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1200px) {
    /* 
    staff hero styling
    */
    .homepage-hero {
        margin: 0 auto;
        max-width: 1250px;
    }
    .staff-tagline-text {
        font-size: 1.5rem;
        padding-left: 1.25em;
    }
}