@charset "utf-8";

@media all {
    .gallery .block div {
        position: absolute;
        width: 90%;
        height: 90%;
        top: 0;
        left:0;
        margin: 5%;
    }

    #volunteerRoles li {
        text-align: left;
    }

    #volunteer {
        grid-area: 1/1/3/3;
    }
    #volunteerRoles {
        grid-area: 3 / 5 / 4 / 7;
    }

    #mentor {
        grid-area: 4 /1 /6/3;
    }

    #student {
        grid-area: 7 / 5 /9/7 ;
    }

}
@media all and (max-width: 768px) {
    .gallery .block div {
        position: absolute;
        width: 90%;
        height: 90%;
        top: 0;
        left:0;
        margin: 5%;
    }
    #volunteer {
        grid-area: 1/1/3/3;
    }
    #volunteerRoles {
        grid-area: 3 / 2 / 3 / 4;
    }

    #mentor {
        grid-area: 4 /1 /6/3;
    }

    #student {
        grid-area: 7 / 2 /8/4 ;
    }

}