@import settings

footer
  display: flex
  justify-content: center
  background-color: $grey-light2
  +resolution(992)
    padding-top: 60px
    padding-bottom: 30px
  +resolution(576, 991)
    padding-top: 40px
    padding-bottom: 30px
  +resolution(0, 575)
    padding-top: 30px
    padding-bottom: 24px

  .inner
    width: 100%

    .top
      +resolution(992)
        display: grid
        grid-template-columns: auto 1fr

      .sentrium-column
        display: flex
        +resolution(0, 575)
          flex-direction: column
          align-items: center
        +resolution(0, 991)
          width: 100%
          justify-content: space-between
          align-items: center
        +resolution(992)
          max-width: 227px
          margin-right: 70px
          flex-direction: column

        div
          display: flex
          +resolution(0, 575)
            flex-direction: column
          +resolution(0, 991)
            align-items: center
          +resolution(992)
            flex-direction: column

          img
            width: 66px
            height: 46px

          p
            font-family: $a
            color: $grey-dark
            font-weight: 600
            letter-spacing: $px
            line-height: 1.4
            +resolution(992)
              margin-top: 24px
            +resolution(576)
              font-size: 18px
            +resolution(576, 991)
              width: 100%
              max-width: 258px
            +resolution(0, 991)
              margin-left: 20px
            +resolution(0, 575)
              font-size: 16px
              margin-top: 14px

        a
          background-color: $black
          color: $white
          font-family: $a
          letter-spacing: $em
          font-weight: 700
          font-size: 14px
          width: 140px
          display: flex
          justify-content: center
          align-items: center
          text-decoration: none
          border-radius: 4px
          height: 40px
          +resolution(992)
            margin-top: 40px
          +resolution(0, 575)
            margin-top: 16px

          &:hover
            background-color: $grey-dark

          &:active
            background-color: $white

    .links-columns
      +resolution(0, 991)
        display: none
      +resolution(992)
        display: grid
        grid-template-columns: 1fr 1fr 1fr 1fr

      .links-column

        h3
          font-size: 16px
          color: $black
          letter-spacing: $em

        ul
          padding-left: 0
          margin-top: 24px
          list-style: none

          li
            margin-bottom: 12px

            &:nth-last-child(1)
              margin-bottom: 0

            a
              font-weight: normal
              font-size: 16px
              color: $grey-dark
              text-decoration: none
              font-family: $a
              letter-spacing: $em

              &:hover
                color: $orange
                text-decoration: underline

    .bottom
      display: flex
      +resolution(992)
        justify-content: space-between
        align-items: center
        margin-top: 43px
      +resolution(576, 991)
        margin-top: 30px
        justify-content: space-between
        align-items: center
      +resolution(0, 576)
        margin-top: 40px
        justify-content: space-between
        align-items: center
        flex-direction: column-reverse

      p
        font-family: $a
        font-weight: 400
        letter-spacing: $em
        color: $grey-dark2
        +resolution(992)
          font-size: 14px
        +resolution(576, 991)
          font-size: 16px
        +resolution(0, 575)
          font-size: 14px
          margin-top: 24px

      .social-logos
        display: grid
        grid-template-columns: 1fr 1fr 1fr 1fr
        column-gap: 12px

        a
          text-decoration: none
          width: 46px
          height: 46px
          display: flex
          justify-content: center
          align-items: center
          background-color: $white
          transition: outline 250ms linear
          outline: none
          border-radius: 2px
          outline: none

          svg
            path
              transition: fill 250ms linear

          &:hover
            svg
              path
                fill: $primary
          &:active
            outline: 1px solid $primary

            svg
              path
                fill: $secondary