
    body {
      font-family: 'Spectral', serif; /* - {font-weight: 600; [SEMI-BOLD]} h1 {font-weight: 700; [BOLD]} p {font-weight: 400; [NORMAL]} nav {font-weight: 500; [MEDIUM]} */
      margin: 0;
      padding: 2rem;
      background: #fafafa;
      color: #3b3b3b;
    }
    
    h1 {
      text-align: center;
      margin-bottom: 2rem;
    }
    
    .grid {
      display: grid;
      grid-template-columns: 200px 200px 200px;
      gap: 2.5rem;
      justify-content: center;
    }
    
    .tile {
      border-radius: 25px 25px 25px 2px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 185px;
      height: 150px;
      display: flex;
      align-items: flex-end;
      color: #3b3b3b;
      font-weight: bold;
      padding: 1rem;
      transition: transform 0.3s ease;
    }
    
    .tile:hover {
      transform: scale(1.15);
    }
    
    .sunrise { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
    .cotton-candy { background: linear-gradient(120deg, #f6d365, #fda085); }
    .ocean-breeze { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
    .matcha-peach { background: linear-gradient(90deg, #d5f3e5, #ffd6e0); }
    .sky-milk { background: linear-gradient(180deg, #e0c3fc, #8ec5fc); }
    .mint { background: linear-gradient(135deg, #a8edea, #fed6e3); }
    .lavender { background: linear-gradient(120deg, #e0c3fc, #f9f5ff); }
    .lemonade { background: linear-gradient(135deg, #fdfbfb, #ebedee); }
    .parchment { background: linear-gradient(225deg, #fff6e6, #ede0ce); }
    .cupcake { background: linear-gradient(90deg, #fbc2eb, #a6c1ee); }
    .peachy { background: linear-gradient(135deg, #ffdde1, #ee9ca7); }
    .vanilla { background: linear-gradient(135deg, #fff47d, #fffbe0); }
    .apricot-meadow { background: linear-gradient(135deg, #ffdab9, #b8e986); }
