/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/


/**umb_name:Artist Page Content*/
.ArtistPage-Content {
    padding-left: 5em;
    display: grid;
    grid-template-columns: 31.25em 1fr;
}

/**umb_name:Artist Page BandName*/
.ArtistPage-BandName {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    justify-self: center;
}

/**umb_name:Artist Page BandLogo*/
.ArtistPage-BandLogo {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    justify-self: center;
    width: 12.5em;
    height: auto;
    border-radius: 1.5625em;
    margin-bottom: 0.5em;
}

/**umb_name:Artist Page Interview*/
.ArtistPage-Interview {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    margin-bottom: 0.5em;
}

/**umb_name:Artist Page Artist Bio image*/
.ArtistPage-ArtistBio-image {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    margin-bottom: 0.5em;
}

/**umb_name:Artist Page BandImg*/
.ArtistPage-BandImg {
    width: 31.25em;
    height: auto;
    align-self: start;
    margin-left: 15%;
    border-radius: 1.5625em;
}

/**umb_name:Artist Page Bio*/
.ArtistPage-Bio {
    width: 31.25em;
}

    /**umb_name:Artist Page Bio p*/
    .ArtistPage-Bio p {
        line-height: 1.6;
        margin-bottom: 0.75em;
    }

@media(max-width: 58em) {
    .ArtistPage-ArtistBio-image {
        display: grid;
    }

    .ArtistPage-BandImg {
        grid-row: 1 / 2;
    }

    .ArtistPage-Bio {
        grid-row: 2 / 3;
        padding-left: 10em;
        overflow: scroll;
        height: 50%;
    }
}

@media(max-width: 49.1875em) {
    .ArtistPage-BandImg {
        width: 50%;
        height: auto;
        margin-left: 8em;
    }

    .ArtistPage-Bio {
        padding-left: 5em;
    }
}

@media(max-width: 43.4375em) {
    .ArtistPage-BandImg {
        width: 30%;
        height: auto;
        margin-left: 8em;
    }

    .ArtistPage-BandLogo {
        width: 30%;
        height: auto;
        justify-self: left;
        margin-left: 8em;
    }

    .ArtistPage-Bio {
        margin-left: 2em;
        width: 75%;
    }
}

@media(max-width: 43.4375em) {

    .ArtistPage-Content {
        margin-left: -4em;
    }

    .ArtistPage-BandImg {
        margin-left: 4em;
    }

    .ArtistPage-BandLogo {
        margin-left: 4em;
        width: 6.25em;
        height: auto;
    }

    .ArtistPage-Bio {
        margin-left: -0.7em;
        width: 50%;
    }
}