* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 "Helvetica Neue", Arial, sans-serif; color: #eee; background: #161616; }
.wrap { max-width: 56rem; margin: 0 auto; padding: 4rem 1.5rem; }
h1 { font-weight: 300; font-size: 2.6rem; letter-spacing: .08em; margin: 0; }
.lead { color: #aaa; margin-bottom: 3rem; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.grid li { aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 1rem;
  background: linear-gradient(135deg, #2b2b2b, #3a3530); }
.grid li:nth-child(2) { background: linear-gradient(135deg, #24303a, #3a4650); }
.grid li:nth-child(3) { background: linear-gradient(135deg, #3a2b2b, #50403a); }
.grid li:nth-child(4) { background: linear-gradient(135deg, #2b3a2e, #405046); }
.grid span { font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }