body {
    font-family: monospace;
}

main {
    text-align: center;
}

#mainImage {
    max-width: 100%;
    height: auto;
}

#mainImageDesc {
    text-align: left;
    padding: 0 2rem;
}

#favsContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

.imageCard {
    background-color: lightgray;
    padding: 0.5rem 0rem;
    border-radius: 1rem;
    /* width: 30rem; */
}

.imageCard img {
    width: 100%;
}

@media screen and (min-width: 990px) {
    #favsContainer {
        grid-template-columns: 1fr 1fr;
    }

    .imageCard img {
        height: 20rem;
        width: auto;
        max-width: 100%;
    }
}

@media screen and (min-width: 1350px) {
    #favsContainer {
        grid-template-columns: 1fr 1fr 1fr;
    }
}