.home-categories {
  grid-column: center-start / center-end;

  @media only screen and (max-width: 768px) {
    grid-column: full-start / full-end;
    margin: 6rem 2rem;
  }

  &__wrapper {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    grid-gap: 1.6rem;

    @media screen and (max-width: 1050px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media only screen and (max-width: 576px) {
      margin-top: 0rem;
      grid-column-gap: 1rem;
    }
  }

  &-card {
    display: grid;
    grid-template-rows: auto 16rem;

    transition: var(--mainTransition);

    @media screen and (max-width: 750px) {
      border: none;
    }

    @media screen and (max-width: 576px) {
      grid-template-rows: auto 15rem;
    }

    @media screen and (max-width: 395px) {
      grid-template-rows: auto 17.5rem;
    }

    @media screen and (max-width: 320px) {
      grid-template-rows: auto 20rem;
    }

    &:hover {
      border-bottom-left-radius: .8rem;
      border-bottom-right-radius: .8rem;

      -webkit-box-shadow: 3px 3px 25px -14px rgba(0, 0, 0, 0.71);
      -moz-box-shadow: 3px 3px 25px -14px rgba(0, 0, 0, 0.71);
      box-shadow: 3px 3px 25px -14px rgba(0, 0, 0, 0.71);
    }

    &__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    &__content {
      display: grid;
      grid-template-rows: 4rem 10rem;
      padding: 2rem 1.3rem;

      border: .1rem solid var(--mainGrey);
      border-bottom-left-radius: .8rem;
      border-bottom-right-radius: .8rem;

      @media screen and (max-width: 750px) {}

      @media screen and (max-width: 576px) {
        grid-template-rows: 3.5rem;
        padding: 1rem;
      }
    }

    &__title {
      font-size: 2.2rem;
      font-family: "Nunito";
      font-weight: bold;
      margin: 0;
      letter-spacing: 1px;
      color: var(--primaryColor);

      @media screen and (max-width: 1330px) {
        font-size: 2rem;
      }

      @media screen and (max-width: 1050px) {
        font-size: 2.1rem;
      }

      @media screen and (max-width: 350px) {
        font-size: 1.9rem;
      }
    }

    &__text {
      font-size: 1.6rem;
      color: #484848;

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