body.home {
  main {
    section > 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);
          display: block;
          padding: 1em;
          text-decoration: none;
          height: 100%;
          &:hover {
            transform: translateY(-2px);
            transition: transform 0.2s ease;
            text-decoration: none;
          }
          strong {
            display: block;
            margin-bottom: 0.4em;
          }
          p {
            margin: 0;
            font-weight: normal;
            font-size: 0.85em;
            color: var(--tranquility);
            line-height: 1.3;
          }
        }
        &:has(a:hover) {
          box-shadow: 0 0 8px black;
          transition: box-shadow 0.2s ease;
        }
      }
    }
  }
}