diff --git a/css/styles.css b/css/styles.css index cadb22a..9ef01b4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -418,57 +418,46 @@ a:hover { margin-top: 0.375rem; } -.steps { +.tiers { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 1.25rem; - margin: 0; - padding: 0; - list-style: none; - counter-reset: step; } @media (max-width: 48rem) { - .steps { + .tiers { grid-template-columns: 1fr; } } -.step { +.tier-card { + display: flex; + flex-direction: column; + align-items: flex-start; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } -.step::before { - counter-increment: step; - content: counter(step); - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - margin-bottom: 1rem; - border-radius: 50%; - background: var(--brand); - color: #fff; - font-size: 0.875rem; - font-weight: 700; -} - -.step h3 { - margin: 0 0 0.5rem; - font-size: 1rem; +.tier-card h3 { + margin: 0 0 0.75rem; + font-size: 1.0625rem; font-weight: 600; } -.step p { - margin: 0; +.tier-card p { + flex: 1; + margin: 0 0 1.25rem; font-size: 0.9375rem; color: var(--muted); } +.tier-card p strong { + color: var(--text); + font-weight: 600; +} + .roadmap { display: grid; grid-template-columns: repeat(3, 1fr); diff --git a/index.html b/index.html index 24a13c3..6349b3d 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@