.Create {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;

  .list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;

    li {
      @include media-breakpoint-down(sm) {
        flex: 1 25%;
      }

      a,
      .link {
        cursor: pointer;
        text-align: center;
        padding: 16px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        font-weight: bold;
        text-decoration: none;
        border: none;

        &:hover {
          background: var(--link-hover-background);
          color: var(--link-hover-color);

          .icon {
            filter: invert(1);
          }
        }
      }
    }

    .icon {
      margin: auto auto 21px;

      img {
        height: 54px;
        max-width: 64px;
      }
    }
  }
}