child.scss

axa-footer {

  * {
    box-sizing: content-box;

    &:before,
    &:after {
      box-sizing: content-box;
    }
  }

  h1, h2, h3, h4, h5, h6 {
    @include text(t4, bold);

    color: $color-prim-white;
    padding: 0;
    margin: 0;

    display: block;
    text-transform: uppercase;
    line-height: 1.5;

    @media (min-width: $breakpoint-xs) {
      @include text(t3, bold);
      line-height: 1.5;
    }

    &[slot="social-title"] {
      display: none;

      @media (min-width: $breakpoint-md) {
        display: block;
      }
    }
  }

  a {
    color: $color-prim-white;
    display: block;
    text-decoration: none;

    padding: 20px 30px;

    @media (min-width: $breakpoint-xs) {
      padding: 0px;
      display: inline;
    }

    &[slot^="social-item"] {
      display: block;
      width: 25px;
      height: 25px;
      padding: 10px;
    }

    &:hover {
      color: rgba($color-prim-white, 0.65);
      text-decoration: none; // Needed because this style is easily overwritten for a:hover declarations
    }
  }
}