.container { display: grid; gap: var(--Spacing-x3); } .cardContainer { display: grid; gap: var(--Spacing-x2); margin-right: calc(0px - var(--Spacing-x2)); overflow-x: auto; padding-right: var(--Spacing-x2); /* Hide scrollbar IE and Edge */ -ms-overflow-style: none; /* Hide Scrollbar Firefox */ scrollbar-width: none; } .link { justify-self: center; } .card { align-content: flex-start; background-color: var(--UI-Grey-10); border-radius: var(--Corner-radius-xLarge); display: grid; gap: var(--Spacing-x2); justify-content: center; justify-items: center; padding: var(--Spacing-x5) var(--Spacing-x1); } .tierHeading { color: var(--Scandic-Peach-70); } .textContainer { align-content: flex-start; display: grid; gap: var(--Spacing-x-one-and-half); justify-content: center; justify-items: center; } .checkIcon { vertical-align: text-bottom; } @media screen and (min-width: 1367px) { .container { gap: var(--Spacing-x4); } .cardContainer { display: grid; grid-template-columns: repeat(12, 1fr); margin-right: 0; /* Three columns in the first row */ padding-right: 0; } .card:nth-of-type(-n + 3) { grid-column: span 4; } .card:nth-of-type(n + 4) { grid-column: span 3; } }