*,
*::before,
*::after {
  box-sizing: border-box;
}
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0;

  li {
    list-style: none;

    article {
      width: 16.2rem;
      display: flex;
      flex-direction: column;
      border: 0.1rem solid var(--default-color);
      border-radius: 0.4rem;
      background-color: var(--default2-color);
      color: var(--text-color);

      &:hover,
      &:focus {
        box-shadow: 0 0 0.4rem var(--linkhover-color);

        a {
          color: var(--linkhover-color);
        }
      }
      img {
        height: 16rem;
        background-image: radial-gradient(circle, transparent 0%, var(--default1-color) 100%);
      }
      a {
        padding: 0.2rem 0.4rem;
        text-decoration: none;
        color: var(--link-color);
        font-weight: 600;
      }
      span {
        padding: 0.2rem 0.4rem;
        font-size: 1.4rem;
      }
    }
  }
}