div.card-container{--grid-layout-gap:10px;--grid-item--min-width:190px;--grid-item--max-width:calc(250px - var(--grid-layout-gap));display:grid;grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-item--min-width),var(--grid-item--max-width)),1fr));grid-gap:var(--grid-layout-gap);justify-content:space-around;margin-top:2em;ul { padding: 0 0 0 5px; } .card { display: grid; grid-template-areas: "image" "header" "shop" "features" "description"; gap: .25rem; padding: .25rem; border: 1px solid #e0e0e0; justify-content: center; border-radius: 8px; grid-template-rows: min-content min-content min-content min-content auto; } .card-image { grid-area: image; } .card-header { grid-area: header; } .card-shop { grid-area: shop; margin-bottom: 0.5rem; } .card-features { grid-area: features; } .card-features, .card-shop { &>ul>li { display: grid; grid-template-columns: 1fr 1fr; span~span { text-align: right; } &.noheader { grid-template-columns: 1fr; } &>a { grid-column: 1 / span 2; display: grid; grid-template-columns: subgrid; } } } ul.pinfo { display: none; } .card-description { grid-area: description; } figure { margin: 0px; }}