#food
{
    width: auto;
    min-width: 350px;
    max-width: 50%;
    height: auto;
    position: relative;
    float: right;
    padding: 0 0 25px 25px;
}

#volunteering
{
    float: left;
    clear: both;
}

.volunteers
{
    width: calc(100% - 100px);
    display: flex;
    margin: 0 50px 0 50px;
    flex-wrap: wrap;
    font-size: 14pt;
}
    .volunteers a
    {
        text-decoration: underline;
    }
    .volunteers div
    {
        width: 330px;
        padding: 10px;
    }

.staff
{
    width: calc(100% - 100px);
    display: flex;
    margin: 0 50px 0 50px;
    flex-wrap: wrap;
}
    .staff div:hover
    {
        opacity: .94;
    }
    .staff div
    {
        width: 250px;
        height: auto;
        max-height: 300px;
        padding: 10px;
    }
        .staff > div > a > div
        {
            width: 225px;
            height: 225px;
            overflow: hidden;
            align-items: center;
        }
        .staff img
        {
            width: 100%;
            height: auto;
        }
        .staff .nametag
        {
            padding-left: 10px;
        }

@media screen and (max-width: 1000px)
{
    #food
    {
        width: 100%;
    }
    .staff
    {
        width: 500px !important;
        margin: 0 auto !important;
    }
    #staff div
    {
        padding: 10px 0 !important;
    }
}

@media screen and (max-width: 600px)
{
    .staff
    {
        width: 250px !important;
    }
}