Quick Links: Left Aligned

.quick-links {
  background: $grey-light;
  border-radius: 0;
  padding: 4.3rem 2rem 4.2rem 2rem;

  &__headings:not(:last-child) {
    margin-bottom: 5.2rem;
  }

  &__title {
    font-family: var(--brand-text--font-family);
    font-style: italic;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 2.6rem;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: $blue-accent;
    margin-bottom: 1.4rem;
  }

  &__links {
    .link {
      font-family: var(--brand-text--font-family);
      font-weight: 400;
      font-size: 2rem;
      line-height: 2.2rem;
      letter-spacing: 0.02em;
      color: $color-interface-light;
      border-bottom: 0.1rem solid $grey;
      padding: 1.1rem 2.6rem 1.1rem 1.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-decoration: none;
      transition: 0.3s;
      text-transform: capitalize;

      &::after {
        content: '';
        background: url(./assets/images/arrow-quick-links.svg) no-repeat center;
        display: inline-block;
        width: 1.4rem;
        height: 1.1rem;
        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -ms-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
      }

      &:hover {
        background: $white;
        color: $blue;
        border-radius: 0.4rem;
        border-bottom: 0.1rem solid $white;

        &::after {
          -webkit-transform: translateX(0.6rem);
          -moz-transform: translateX(0.6rem);
          -ms-transform: translateX(0.6rem);
          -o-transform: translateX(0.6rem);
          transform: translateX(0.6rem);
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    margin: 0 7rem;
    padding: 4rem 11rem 4rem 11.1rem;
    border-radius: 0.8rem;

    &.left-aligned {
      margin: 0 14rem 0 0;
      padding: 4rem 4rem 4rem 18.6rem;
      border-radius: 0 0.8rem 0.8rem 0;
    }

    &.right-aligned {
      margin: 0 0 0 14rem;
      padding: 4rem 18.2rem 4rem 4rem;
      border-radius: 0.8rem 0 0 0.8rem;
    }

    &__links {
      .link {
        padding: 1.1rem 2.6rem 1.1rem 1.6rem;
      }
    }
  }
}