@charset "utf-8";

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

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

    main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "h2 h2"
        "intro intro"
        "warped warped" 
        "wwwy wwwy"
        "early revival";
        text-align: justify;
        gap: 2%;
        margin-bottom: 8%;
    }

    /* intro grid area and mini grid */
    .intro {
        grid-area: intro;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "h3 img"
        "p1 img"
        "p2 img";
        gap: 2%;
    }

    .intro h3 {
        grid-area: h3;
    }

    .intro img {
        grid-area: img;
    }

    .p1 {
        grid-area: p1;
    }

    .p2 {
        grid-area: p2;
    }

    /* general main rid areas */
    h2 {
        grid-area: h2;
    }
    .warped-tour {
        grid-area: warped;
    }

    .whenwewereyoung {
        grid-area: wwwy;
    }

    .earlyalbums {
        grid-area: early;
    }

    .revival {
        grid-area: revival;
    }

    /* main h2 {
        font-size: 3em;
        width: fit-content;
        margin: 0 auto;
    } */
}

/* tablet media query */
@media (min-width: 1024px) and (max-width: 1199px) {
    main img {
        width: 40%;
    }
}

/* mobile media query */
@media (max-width: 1023px) {
    main img {
        width: 60%;
    }
}