// footer
.ok-footer {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;

  @media (min-width: 851px) {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 'first second second third third third third fourth fourth .';
    position: relative;
    align-items: center;
  }

  .ok-column {
    z-index: 3;
    color: #777;
    font-size: 14px;

    &.second {
      color: #ccc;
      font-size: 13px;

      @media (max-width: 850px) {
        order: 3;
      }
    }

    &.third {
      text-align: center;
      display: flex;
      justify-content: center;
      flex-direction: column;

      .license {
        margin-bottom: 20px;

        @media (min-width: 851px) {
          margin-top: 5px;
          margin-bottom: 0;
        }
        @media (min-width: 1200px) {
          margin-top: 15px;
        }

        .license-text {
          color: #ddd;

          @media (min-width: 1200px) {
            font-size: 10px;
          }
          @media (max-width: 1599px) {
            display: none;
          }
        }

        .ok-link {
          color: #c8c8c8;
          font-size: 20px;

          @media (min-width: 1200px) {
            font-size: 10px;
          }

          .license-title {
            @media (max-width: 1199px) {
              display: none;
            }
          }

          .license-icons {
            @media (max-width: 1199px) {
              svg {
                margin: 0 10px;
              }
            }
          }

          &:hover {
            &:after {
              content: none;
            }
          }

          &:before {
            background-color: transparent;
            bottom: 0;
          }
        }
      }

      .ok-description {
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        @media (min-width: 851px) {
          flex-direction: row;
        }
      }

      @media (max-width: 850px) {
        order: 2;
        flex-direction: column;

        .footer-description {
          margin-bottom: 30px;
        }
      }
    }

    &.fourth {
      text-align: right;

      @media (max-width: 850px) {
        order: 1;
        margin: 20px 0;
        width: 80vw;

        .social-networks {
          display: flex;
          justify-content: space-around;

          .social {
            padding: 8px;
          }
        }
      }
    }
  }

  .brand-name {
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;

    @media (min-width: 851px) {
      left: 10vw;
    }

    svg {
      position: relative;
      fill: #f6f6f6;
      width: 100vw;
      display: flex;
      align-self: flex-end;
      top: 3vw;

      @media (min-width: 851px) {
        max-width: 80vw;
      }
    }
  }
}