.countable {
  box-shadow: -28px 0px 62px 1px rgba(15, 121, 134, 0.56);
  border-radius: 5px;

  padding: 2.125rem 1.5rem 1.5rem 1.625rem;

  background-color: white;

  [class~="number"] {
    font-size: 3rem;
    color: var(--color-2);

    @media screen and (min-width: 640px) {
      font-size: 4rem;
    }
  }

  [class~="icon"] {
    color: var(--color-2);
  }

  [class~="title"] {
    font-size: 1.5rem;
    color: var(--black);

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

  &[class~="transparent"] {
    background-color: transparent;
    box-shadow: none;
    padding: 0;

    [class~="number"] {
      color: var(--white);
    }

    [class~="title"] {
      color: var(--white);
    }
  }
}