.tags-crud {
  &__create-tag-btn {
    font-size: 1.7rem;
    margin-top: -1rem;
    border: none;
    border-radius: .8rem;
    padding: 1rem 2.2rem;
    transition: var(--mainTransition);
    background-color: var(--primaryColor);
    color: var(--mainWhite);

    @media only screen and (max-width: 576px) {
      font-size: 1.5rem;
      width: 100%;
    }

    &:hover {
      background-color: var(--secondaryColor);
      cursor: pointer;
    }
  }

  &__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;

    margin-top: 3rem;
    border: .1rem solid var(--mainGrey);
    border-radius: .8rem;
    padding: 3rem;

    @media only screen and (max-width: 576px) {
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

      padding: 1rem;
    }

    &--tag-btn {
      font-size: 1.4rem;
      border: none;
      border-radius: .8rem;
      border: .2rem solid var(--mainGrey);
      padding: 1rem 2.2rem;
      background-color: var(--mainWhite);
      color: var(--mainBlack);
      transition: var(--mainTransition);

      @media only screen and (max-width: 576px) {
        font-size: 1.3rem;
      }

      &:hover {
        background-color: var(--secondaryColor);
        border: .2rem solid var(--secondaryColor);
        cursor: pointer;
      }
    }
  }
}