.vh-footer-primary {
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    width: 50%;
    background: $secondary;
    height: 60px;
    top: -60px;
    left: 0;
    transform: skewY(-3.5deg);
    transform-origin: right top;
    box-shadow: 0 25px 0 $primary;
    z-index: 2;
  }
  &::after {
    content: "";
    position: absolute;
    width: 50%;
    background: $secondary;
    height: 60px;
    top: -60px;
    right: 0;
    transform: skewY(3.5deg);
    transform-origin: left top;
    box-shadow: 0 25px 0 $primary;
    z-index: 2;
  }
  &__container {
    position: relative;
    background-image: url(../img/footer-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba($alpha, 0.95);
      z-index: -1;
    }
  }
  &__title {
    position: relative;
    margin-bottom: 40px;
    &::after {
      content: "";
      width: 30px;
      height: 5px;
      background-image: linear-gradient(0deg, $bg-8 0%, $bg-7 100%);
      position: absolute;
      left: 0;
      top: calc(100% + 15px);
    }
  }
  &__about {
    @include xl-screen {
      max-width: 40ch;
    }
  }
  &__body {
    padding-top: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba($white, 0.3);
    position: relative;
    z-index: 1;
    &::before {
      @include xxl-screen {
        content: url(../img/footer-img-left.png);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: -1;
      }
    }
    &::after {
      @include xxl-screen {
        content: url(../img/footer-img-right.png);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: -1;
      }
    }
  }
  &__copyright {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
