.container { display: grid; gap: 1.5rem; } .header { display: grid; grid-template-areas: "title link"; grid-template-columns: 1fr max-content; } .title { grid-area: title; font-weight: 600; color: var(--some-black-color, #111); text-align: center; } .link { grid-area: link; } .subtitle { margin: 0; font-size: 2rem; } .value { color: var(--Theme-Primary-Light-On-Surface-Text); } .cardContainer { display: flex; gap: 16px; } .cardSubtitle { font-family: var(--ff-fira-sans); font-size: 16px; font-weight: 400; line-height: 14.4px; text-align: center; color: var(--Theme-Primary-Light-On-Surface-Accent); margin: 0; } .card { flex: 1 1 0px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; min-height: 280px; background-color: var(--Base-Fill-Normal); justify-content: center; align-items: center; padding: 30px; border-radius: 4px; text-decoration: none; text-align: center; color: var(--Theme-Primary-Light-On-Surface-Text); aspect-ratio: 1/1; } @media screen and (min-width: 950px) { .card:nth-child(2) { grid-area: card2; } }