body.home {
  main {
    section > ul {
      list-style: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 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;
          text-decoration: none;
          height: 100%;
          &:hover {
            transform: translateY(-2px);
            transition: transform 0.2s ease;
            text-decoration: none;
          }
          p {
            margin: 0;
            font-weight: normal;
            color: var(--tranquility);
            line-height: 1.3;
          }
        }
        &:has(a:hover) {
          box-shadow: 0 0 8px black;
          transition: box-shadow 0.2s ease;
        }
      }

      > li.small a {
        padding: 0.5em 0.7em 0.6em;
        h3 {
          margin: 0 0 0.3em;
          font-size: 0.9em;
          color: inherit;
          line-height: 1.25;
        }
        p {
          font-size: 0.75em;
        }
      }

      > li.big {
        grid-column: span 2;
      }
      > li.big a {
        padding: 0.8em 1em 1em 1em;
        h3 {
          margin: 0 0 0.4em;
          font-size: 1em;
          color: inherit;
          line-height: 1.3;
          height: 2.6em;
          display: flex;
          align-items: center;
        }
        p {
          font-size: 0.85em;
        }
      }
    }

    section + section {
      margin-top: 1.5rem;
    }
  }
}