.wrap { padding: 96px 0; } .grid { max-width: 1440px; margin: 0 auto; padding: 0 40px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--charcoal); border: 1px solid var(--charcoal); } .tile { background: var(--abyss); padding: 32px 28px; transition: background 200ms ease, transform 200ms ease; min-height: 260px; } .tile:hover { background: var(--iron); transform: translateY(-2px); } .kPill { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px solid var(--gold); margin-bottom: 20px; } .k { font-size: 16px; font-weight: 900; color: var(--gold); letter-spacing: -0.01em; } .unit { font-size: 10px; letter-spacing: 0.96px; color: var(--gold-soft); text-transform: uppercase; } .tileTitle { margin: 0 0 12px; font-size: 20px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; color: var(--white); } .tileText { margin: 0; font-size: 13px; color: var(--steel); letter-spacing: 0.12px; line-height: 1.6; text-transform: none; } @media (max-width: 640px) { .grid { padding: 0 20px; } }