html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #f3f2f1; } a { color: #0078d4; text-decoration: none; } a:hover { text-decoration: underline; } h1 { margin: 0; } h1 a { font-size: 16px; font-weight: 400; } .Container { justify-content: center; padding: 20px 0; max-width: 1040px; margin: 0 auto; } .Tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: 20px; display: grid; list-style-type: none; margin: 0; padding: 0; counter-reset: steps; } .Tile { background-color: white; border-radius: 2px; box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); opacity: 0.96; transition: all 0.15s linear; position: relative; overflow: hidden; padding: 12px; } .Tile:not(.Tile--intro):hover { box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); opacity: 1; } .Tile.Tile--numbered::after { counter-increment: steps; content: counter(steps); position: absolute; left: -20px; bottom: -3px; font-size: 220px; line-height: 188px; color: #eaeaea; z-index: 1; } .Tile-link { align-items: center; text-align: center; color: #323130; display: flex; flex-direction: column; height: 148px; justify-content: center; text-decoration: none; position: relative; font-size: 24px; font-weight: 200; z-index: 2; } a.Tile-link { color: #0078d7; } a.Tile-link:hover { text-decoration: underline; } .Tile-link i { font-size: 32px; margin-bottom: 12px; color: #605e5c; } .Tile-links { font-size: 16px; color: #605e5c; } .Tile-links a { text-decoration: none; color: #0078d4; } .Tile-links a:hover { text-decoration: underline; } .Tile--intro { grid-column: span 2; padding: 20px; } .Tile--intro h1 { font-size: 24px; font-weight: 300; margin: 8px 0; padding: 0; } .Tile--intro p { font-size: 14px; margin: 0; } .Tile--intro a, .Tile--intro a:visited { color: #0078d4; }