html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-color: #f3f2f1; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+); background-attachment: fixed; background-position: 50% 50%; background-repeat: no-repeat; background-size: 900px 740px; } .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; } .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; } .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-link { align-items: center; color: #323130; display: flex; flex-direction: column; height: 148px; justify-content: center; text-align: center; text-decoration: none; } .Tile-link i { font-size: 32px; margin-bottom: 12px; color: #605e5c; } .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; }