/* Mobile First View */
main {
    background-color: var(--Crust);
    display: grid;
    grid-template-areas:
        '.'
        '.'
        '.';
    gap: 20px;
    padding: 20px;
}

main>div {
    background-color: var(--Base);
    color: var(--Text);
    display: flex;
    border-radius: 8px;
    font-size: 30px;
    padding: 20px;
    text-align: left;
    flex-flow: nowrap column;
    min-width: 0;
    flex: 1 0 auto;
}

main>div h2 {
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}

main>div>p,
main>div>ul {
    font-size: 18px;
}

/* 
 * Makes the image within the flex item take on the same size as the parent div.
 * This works up until the image's width is reached; 960px wide in this case.
 */
main>div>img {
    border-radius: 8px;
    align-self: center;
    min-width: 0;
    max-width: 100%;
}

.photo {
    background-color: var(--Flamingo);
}

/* Medium devices (laptops/desktops, 960w and up) */
@media only screen and (min-width: 960px) {
    #container1 {
        grid-area: a;
    }

    #container2 {
        grid-area: b;
    }

    #container3 {
        grid-area: c;
    }


    main {
        grid-template-areas:
            'a b b'
            'a b b'
            'a c c'
    }
}