.cardContainer { align-self: flex-start; background-color: var(--Surface-Primary-Hover-Accent); border-radius: var(--Corner-Radius-lg); display: grid; gap: var(--Space-x2); padding: var(--Space-x2); grid-template-areas: "price" "checkbox" "terms"; width: min(100%, 696px); } .priceContainer { grid-area: price; margin-bottom: var(--Space-x1); } .price { color: var(--Scandic-Brand-Scandic-Red); } .checkBox { align-self: center; grid-area: checkbox; } .terms { grid-area: terms; } @media screen and (min-width: 768px) { .cardContainer { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--Space-x3); grid-template-areas: "price checkbox" "terms terms"; } .priceContainer { margin-bottom: 0; display: flex; flex-direction: column; } }