.a-wrapper {
  display: block;
}

  .a-wrapper .a-icon {
    position: unset;
    width: 100%;
    max-width: 3rem;
    height: 100%;
    max-height: 3rem;
    transform: unset;
    color: var(--color-6);
    fill: inherit;
  }

  .a-wrapper-with-bg {
    position: relative;
    display: block;
    width: 4rem;
    height: 4rem;
    background-color: var(--color-4);
  }

  @media all and (min-width: 1024px) {

  .a-wrapper-with-bg {
      width: 5rem;
      height: 5rem
  }
    }

  .a-wrapper-with-bg .a-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      max-width: 2.2rem;
      transform: translate(-50%, -50%);
      color: var(--color-12);
      fill: currentColor;
      stroke: currentColor;
    }

  @media all and (min-width: 1024px) {

  .a-wrapper-with-bg .a-icon {
        max-width: 2.5rem
    }
      }