* {
    --people-cyan: #00b2ec;
    --people-yellow: #fff000;
    
    --image-width: 320px;
    --overlap-amount: 20px;
}

body {
    margin: 0;
    font-family: futura-pt, sans-serif;
}

.staff-ladder-container {
    width: calc(100% - 64px);
    max-width: 1279px;
    
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    padding-top: 135px;
    margin-bottom: 48px;
}

.staff-ladder-container ul {
    list-style: none;
    padding: 0;
}

.staff-ladder-container li {
    display: grid;
    grid-template-columns: [col1-start] calc(var(--image-width) - var(--overlap-amount)) [col2-start] var(--overlap-amount) [col3-start] auto;
    
    padding-top: 36px;
    margin-top: 36px;
    border-top: 1px solid rgba(0,0,0,0.15);
}

.staff-ladder-container li:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.staff-photo-container {
    grid-row: 1;
    grid-column: col1-start / col3-start;
    width: 100%;
}

.staff-photo-container img {
    width: 100%;
}

.staff-info-container {
    grid-row: 1;
    grid-column: col2-start / span 2;
}

.staff-info {
    display: block;
    margin-top: var(--overlap-amount);
    padding: 24px;
    background: white;
    box-shadow: 6px 6px 0 0 var(--people-yellow);
}

.staff-info h4 {
    font-family: acumin-pro-extra-condensed, sans-serif;
    font-size: 36px;
    line-height: 32px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    
    margin: 0;
    margin-top: 10px;
}

.staff-info h4:first-child {
    margin-top: 0;
}

.staff-info h4 span {
    color: var(--people-cyan);
}

.staff-info h4 a {
    line-height: 1;
    margin: 0;
    color: var(--people-cyan);
    
    background: linear-gradient(var(--people-cyan), var(--people-cyan));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 1.5px);
    background-size: 100% 2px;
}
.staff-info p {
    font-family: futura-pt, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    margin-top: 24px;
}


@media screen and (max-width: 1024px) {
    .staff-ladder-container {
        width: calc(100% - 32px);
        max-width: 640px;
    }
    
    .staff-ladder-container li {
        grid-template-columns: 100%;
        grid-template-rows: [row1-start] 320px [row2-start] auto;
    }
    
    .staff-photo-container {
        grid-column: 1;
        grid-row: row1-start / row2-start;
        height: 100%;
        width: 320px;
        
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
    }
    
    .staff-info-container {
        grid-column: 1;
        grid-row: row2-start;
    }
    
    .staff-info {
        margin-top: 0;
    }
    
    .staff-info h4 {
        font-size: 32px;
    }
}

@media screen and (max-width: 820px) {
    .staff-ladder-container {
        padding-top: 75px;
    }
}

@media screen and (max-width: 760px) {
    .staff-ladder-container {
        width: 100%;
        max-width: 100%;
        padding-top: 45px;
    }
    
    .staff-ladder-container li {
        grid-template-columns: 100%;
        grid-template-rows: [row1-start] calc(100vw - var(--overlap-amount)) [row2-start] var(--overlap-amount) [row3-start] auto;
    }
    
    .staff-photo-container {
        grid-row: row1-start / row3-start;
        width: 100vw;
    }
    
    .staff-info-container {
        z-index: 1;
        width: calc(100% - 32px);
        max-width: 640px;
        
        grid-column: 1;
        grid-row: row2-start / span 2;
        
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
    }
    
    .staff-info h4 {
        font-size: 28px;
        line-height: 32px;
    }
}