// container
.container {
  display: grid;
  grid-template-rows: 100px auto 320px;
  overflow-x: hidden;
  z-index: 1;
  position: relative;
  min-height: 100vh;

  @media (min-width: 851px) {
    grid-template-rows: 100px auto 100px;
  }
}

// animated-grid
.animated-grid-container {
  display: grid;
  position: absolute;
  grid-template-columns: repeat(10, 1fr);
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  animation-name: lines;
  animation-duration: 2s;
  opacity: 0.3;
  z-index: 2;
}

.line {
  border-right: 1px solid rgba(186, 186, 186, 0.5);
  transition: 1s ease-out;

  &:nth-child(2n) {
    border-color: transparent;
  }

  &:nth-child(3),
  &:nth-child(7) {
    @media (max-width: 850px) {
      border-color: transparent;
    }
  }

  &:last-child {
    border: none;
  }
}

@keyframes lines {
  from {
    height: 0.1vh;
  }
  to {
    height: 100vh;
  }
}

// ok-container
// 2col
.ok-container {
  @include grid-container;
  margin: 0 0 50px;
  padding: 30px 0;

  @media (min-width: 851px) {
    margin: 20px 0 120px;
    padding: 30px 15px;
  }

  &.col-2 {
    @media (min-width: 1200px) {
      @include grid-container(2);
    }
  }

  &.col-3 {
    @media (min-width: 1200px) {
      @include grid-container(3);
    }
  }
}

.ok-box {
  display: flex;
  justify-content: space-around;
  margin: 0 0 50px;
  padding: 30px 0;

  @media (min-width: 851px) {
    margin: 20px 0 120px;
    padding: 30px 15px;
  }

  &.bg {
    background: linear-gradient(rgba(254, 250, 246, 0.5) 2.42%, rgba(241, 241, 241, 0.5) 100%);
    border-radius: 0 0 26px 26px;
  }

  svg {
    font-size: 50px;
  }

  &.wrapper-social {
    transition: all 0.3s ease-in-out;

    @media (max-width: 850px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      justify-content: center;
      text-align: center;
    }
  }
}

.ok-block {
}