.cardContainer { display: grid; gap: var(--Space-x2); } .pointMsg { text-align: center; color: var(--Text-Heading); } .link { justify-self: center; } .card { background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-xl); display: grid; gap: var(--Space-x2); min-height: 280px; justify-items: center; padding: var(--Space-x5) var(--Space-x1); grid-template-rows: auto auto 1fr; } .textContainer { align-content: flex-start; display: flex; gap: var(--Space-x15); width: 100%; flex-wrap: wrap; justify-content: center; } .scriptedText { color: var(--Icon-Accent); transform: rotate(-11deg); transform-origin: left; margin-bottom: -4px; } .redText { color: var(--Base-Text-Accent); } .levelText { color: var(--Text-Secondary); margin: 0; } .checkIcon { vertical-align: middle; } @media screen and (min-width: 1367px) { .cardContainer { display: grid; grid-template-columns: repeat(12, 1fr); } .card:nth-of-type(-n + 3) { grid-column: span 4; } .card:nth-of-type(n + 4) { grid-column: span 3; } }