@charset "utf-8";

/* lineup-layout.css for Lab 13 in C6P2 Web Development Internship - Brittany Thompson, December 9, 2025 */

/* div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "band band band"
    "album1 album2 album3";
}

img {
    max-width: 100%;
    height: auto;
}

.band {
    grid-area: band;
}

.album1 {
    grid-area: album1;
}

.album2 {
    grid-area: album2;
}

.album3 {
    grid-area: album3;
} */



/* desktop media query */
@media (min-width: 1200px) {
    body {
        row-gap: 0.7%;
    }

    img {
        max-width: 100%;
        height: auto;
    }
    
    /* section1 for the left-aligned layouts */
    .section1 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "img1 title"
        "img1 bio"
        "albums albums";
        gap: 2%;

    }

    /* section2 for the ritght-aligned layouts */
    .section2 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas: "title img1"
        "bio img1"
        "albums albums";
        gap: 2%;

    }

    .title {
        grid-area: title;
    }

    .bio {
        grid-area: bio;
    }

    .band-img {
        grid-area: img1;
    }

    /* grid layout for the div section of the album title and cover art */
    .album-list {
        grid-area: albums;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "albumsp albumsp albumsp"
        "album1 album2 album3";
        gap: 2%;
    }

    .albums-p {
        grid-area: albumsp;
        text-align: center;
    }

    .album1 {
    grid-area: album1;
    }

    .album2 {
        grid-area: album2;
    }

    .album3 {
        grid-area: album3;
    }

    /* spacing between each artist section */
    section {
        margin: 5% 1%;
        padding: 2% 0 4% 0;
        border-top: 3px dotted rgb(223, 112, 131);
        border-bottom: 3px dotted rgb(223, 112, 131);
    }

    main p {
        text-align: justify;
        padding-top: 1%;

    }
}

/* tablet media query */
@media (min-width: 1024px) and (max-width: 1199px) {
    .section1 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "title"
        "img1"
        "bio"
        "albums";
    }

    .section2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "title"
        "img1"
        "bio"
        "albums";
    }

    .title {
        grid-area: title;
    }

    .bio {
        grid-area: bio;
    }

    .band-img {
        grid-area: img1;
        width: 60%;
    }

    .album-list {
        grid-area: albums;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "albumsp albumsp albumsp"
        "album1 album2 album3";
    }

    .albums-p {
        grid-area: albumsp;
        text-align: center;
    }

    .album1 {
        grid-area: album1;
        width: 80%;
    }

    .album2 {
        grid-area: album2;
        width: 80%;
    }

    .album3 {
        grid-area: album3;
        width: 80%;
    }

    section {
        margin: 2%;
    }

}

/* mobile media query */
@media (max-width: 1023px) {
    main {
        text-align: justify;
    }

    .section1 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "title"
        "img1"
        "bio"
        "albums";
        gap: 2% 1%;
    }

    .section2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "title"
        "img1"
        "bio"
        "albums";
        gap: 2%;
    }

    .title {
        grid-area: title;
    }

    .bio {
        grid-area: bio;
    }

    .band-img {
        grid-area: img1;
        width: 70%;
    }

    .album-list {
        grid-area: albums;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "albumsp albumsp albumsp"
        "album1 album2 album3";
        gap: 2% 1%;
    }

    .albums-p {
        grid-area: albumsp;
        text-align: center;
    }

    .album1 {
        grid-area: album1;
        width: 80%;
    }

    .album2 {
        grid-area: album2;
        width: 80%;
    }

    .album3 {
        grid-area: album3;
        width: 80%;
    }

    section {
        margin: 15% 4%;
    }
}

/* smaller mobile layouts */
@media (max-width: 780px) {
    section {
        margin: 20% 4%;
    }
}