:root{
    --primary-color: #DFB2F4;
    --card-width: 332px;
}


html * {box-sizing: border-box;}

body{
    font-family: "Comic Sans MS", "system-ui", "sans-serif";
    font-size:100%;
    line-height: 133%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
    "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
    "mne mne mne mne mne mne mne mne mne mne mne mne"
    "ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
}

header{
    grid-area: hdr;
    display: grid;
    grid-template-columns: subgrid;
}

main{
    grid-area: mne;
    display: grid;
/*     grid-template-columns: subgrid; */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    row-gap: 1em;
    justify-items: center;
}

footer{
    grid-area: ftr;
}

.card{
    margin: 0;
    background-color: #abc8;
    width: var(--card-width);
    padding 8px;
    text-align:left;
/*    grid-column: span 12;*/
}

.card figure {
    margin: 0;
    text-align: center;
}

.card img{
    max-width: 300px;
}

.card p{
    min-height: 4em;
}


/*@media (min-width: 664px){
    .card{
        grid-column: span 6;
    }
}

@media (min-width: 996px){
    .card{
        grid-column: span 4;
    }
}

@media (min-width: 1328px){
    .card{
        grid-column: span 3;
    }
}*/