/* About Title Page Header thingabob */
#AboutTitle h2{
    margin: 0;
    text-decoration: underline;
}
#AboutTitle p {
    margin: 10px 100px;
}


/* THE GRID (AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) */
#bandGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: minmax(0, auto);
    row-gap: 10px;
    align-items: start;
    grid-template-areas:
        "michealRobertsImg michealRobertsTitle"
        "michealRobertsImg michealRobertsInfo"
        "gregGormanImg gregGormanTitle"
        "gregGormanImg gregGormanInfo"
        "johnOvreboImg johnOvreboTitle"
        "johnOvreboImg johnOvreboInfo"
        "Jo-AnnImg Jo-AnnTitle"
        "Jo-AnnImg Jo-AnnInfo"
        "LillianStreetImg LillianStreetTitle"
        "LillianStreetImg LillianStreetInfo"
        "MelanieImg MelanieTitle"
        "MelanieImg MelanieInfo"
        "AkudaImg AkudaTitle"
        "AkudaImg AkudaInfo"
        "MiguelImg MiguelTitle"
        "MiguelImg MiguelInfo"
        "ToddImg ToddTitle"
        "ToddImg ToddInfo"
        "JohnLeeImg JohnLeeTitle"
        "JohnLeeImg JohnLeeInfo";
}

/* Constants across the page */
#bandGrid img {
    align-self: center;
    justify-self: center;
    height: 100%;
    max-height: 350px;
    width: auto;
}
#bandGrid p {
    margin-right: 20px;
    margin: 10px;
    font-size: 16px
}
.bandMemberTitle p {
    color: grey;
    margin: 0;
}
.bandMemberTitle {
    margin: 0;
    padding: 0;
}

/* Defining grid areas for each individual item */
#michealRobertsImg {
    grid-area: michealRobertsImg;
}
#michealRobertsTitle {
    grid-area: michealRobertsTitle;
}
#michealRobertsInfo {
    grid-area: michealRobertsInfo;
}
#gregGormanImg {
    grid-area: gregGormanImg;
}
#gregGormanTitle {
    grid-area: gregGormanTitle;
}
#gregGormanInfo {
    grid-area: gregGormanInfo;
}
#johnOvreboImg {
    grid-area: johnOvreboImg;
}
#johnOvreboTitle {
    grid-area: johnOvreboTitle;
}
#johnOvreboInfo {
    grid-area: johnOvreboInfo;
}
#Jo-AnnImg {
    grid-area: Jo-AnnImg;
}
#Jo-AnnTitle {
    grid-area: Jo-AnnTitle;
}
#Jo-AnnInfo {
    grid-area: Jo-AnnInfo;
}
#LillianStreetImg {
    grid-area: LillianStreetImg;
}
#LillianStreetTitle {
    grid-area: LillianStreetTitle;
}
#LillianStreetInfo {
    grid-area: LillianStreetInfo;
}
#MelanieImg {
    grid-area: MelanieImg;
}
#MelanieTitle {
    grid-area: MelanieTitle;
}
#MelanieInfo {
    grid-area: MelanieInfo;
}
#AkudaImg {
    grid-area: AkudaImg;
}
#AkudaTitle {
    grid-area: AkudaTitle;
}
#AkudaInfo {
    grid-area: AkudaInfo;
}
#MiguelImg {
    grid-area: MiguelImg;
}
#MiguelTitle {
    grid-area: MiguelTitle;
}
#MiguelInfo {
    grid-area: MiguelInfo;
}
#ToddImg {
    grid-area: ToddImg;
}
#ToddTitle {
    grid-area: ToddTitle;
}
#ToddInfo {
    grid-area: ToddInfo;
}
#JohnLeeImg {
    grid-area: JohnLeeImg;
}
#JohnLeeTitle {
    grid-area: JohnLeeTitle;
}
#JohnLeeInfo {
    grid-area: JohnLeeInfo;
}

@media screen and (max-width: 1023px) and (min-width: 411px) {
    #bandGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    row-gap: 0;
    align-items: start;
    grid-template-areas:
        "michealRobertsImg michealRobertsTitle"
        "michealRobertsInfo michealRobertsInfo"
        "gregGormanImg gregGormanTitle"
        "gregGormanInfo gregGormanInfo"
        "johnOvreboImg johnOvreboTitle"
        "johnOvreboInfo johnOvreboInfo"
        "Jo-AnnImg Jo-AnnTitle"
        "Jo-AnnInfo Jo-AnnInfo"
        "LillianStreetImg LillianStreetTitle"
        "LillianStreetInfo LillianStreetInfo"
        "MelanieImg MelanieTitle"
        "MelanieInfo MelanieInfo"
        "AkudaImg AkudaTitle"
        "AkudaInfo AkudaInfo"
        "MiguelImg MiguelTitle"
        "MiguelInfo MiguelInfo"
        "ToddImg ToddTitle"
        "ToddInfo ToddInfo"
        "JohnLeeImg JohnLeeTitle"
        "JohnLeeInfo JohnLeeInfo";
    align-items: center;
    }
    .bandMemberTitle h3, .bandMemberTitle p {
        text-align: center;
    }
    #bandGrid img {
        height: 100%;
        max-height: 200px;
        width: auto;
    } 
    #AboutTitle p {
        margin: 20px
    }
}

@media screen and (max-width: 410px) {        
    #AboutTitle p {
        margin: 5px;
        padding: 0
    }

    #bandGrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 0;
    align-items: start;
    grid-template-areas:
        "michealRobertsTitle"
        "michealRobertsImg"
        "michealRobertsInfo"
        "gregGormanTitle"
        "gregGormanImg"
        "gregGormanInfo"
        "johnOvreboTitle"
        "johnOvreboImg"
        "johnOvreboInfo"
        "Jo-AnnTitle"
        "Jo-AnnImg"
        "Jo-AnnInfo"
        "LillianStreetTitle"
        "LillianStreetImg"
        "LillianStreetInfo"
        "MelanieTitle"
        "MelanieImg"
        "MelanieInfo"
        "AkudaTitle"
        "AkudaImg"
        "AkudaInfo"
        "MiguelTitle"
        "MiguelImg"
        "MiguelInfo"
        "ToddTitle"
        "ToddImg"
        "ToddInfo"
        "JohnLeeTitle"
        "JohnLeeImg"
        "JohnLeeInfo";
    align-items: center;
    }

    .bandMemberTitle p {
        margin: 0;
        text-align: center;
    }
    .bandMemberTitle h3{
        margin-top: 20px;
        text-align: center;
    }
    #bandGrid img {
        height: 100%;
        max-height: 200px;
        width: auto;
    }
}