body.home {
  main {
    > ul {
      list-style: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;

      > li {
        border: var(--bg-secondary-light) 2px solid;
        border-radius: 0.5em;
        background-color: var(--bg-secondary);
        background: linear-gradient(to bottom, var(--bg-secondary-light) -20%, var(--bg-secondary-dark) 50%);
        a {
          color: var(--modern-ivory);
          font-weight: bold;
          display: block;
          padding: 1em;
          &:hover {
            transform: translateY(-2px);
            transition: transform 0.2s ease;
          }
        }
        &:has(a:hover) {
          box-shadow: 0 0 8px black;
          transition: box-shadow 0.2s ease;
        }
      }
    }
  }
}