/*------------------------------------*\
  $PRECIS
\*------------------------------------*/

.precis {
  margin: {
    bottom: 20px;
  }
  clear: both;
  text-align: center;

  &__title {
    font: {
      size: font-size(15);
      weight: 700;
      family: $body-font;
    }
    text: {
      transform: uppercase;
      decoration: none !important;
    }
    color: $brand;
    margin: 0 20px;
    transition: color 0.3s;

    &:after {
      content: '';
      display: block;
      width: 10px;
      height: 1px;
      background: $brand;
      margin: 15px auto 20px;
      transition: all 0.3s;
    }
  }

  &__link {
    display: block;
    width: 100%;
    text: {
      align: center;
      decoration: none !important;
    }

    @include states {
      .precis__title {
        &:after {
          width: 85px;
        }
      }
    }
  }

  &__img {
    width: 100%;
    display: block;

    img {
      width: 100%;
      max-width: 150px;
      margin: {
        bottom: 20px;
      }
    }
  }

  .btn {
    clear: both;
    padding: 0;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
  }

  &--small {
    margin: {
      right: 10px;
      bottom: 10px;
    }
    background: #fff;
    padding: 40px 25px;
    width: calc(50% - 5px);
    float: left;

    &:nth-of-type(2n) {
      margin: {
        right: 0;
      }
    }

    @include mq(mq768) {
      &,
      &:nth-of-type(2n) {
        width: calc((100% - 20px) / 3);
        margin: {
          right: 10px;
        }
      }

      &:nth-of-type(3n) {
        margin: {
          right: 0;
        }
      }
    }

    @include mq(mq1200) {
      &,
      &:nth-of-type(2n),
      &:nth-of-type(3n) {
        width: calc((100% - 30px) / 4);
        margin: {
          right: 10px;
        }
        padding: {
          left: 50px;
          right: 50px;
        }
      }

      &:nth-of-type(4n) {
        margin: {
          right: 0;
        }
      }
    }
  }

  p { clear: both; }

  &-wrap {
    &--mixed {
      display: flex;
      flex-wrap: wrap;
    }
  }
}

_:-ms-fullscreen, :root .precis--small {
  width: calc(49.9% - 5px);

  @include mq(mq768) {
    width: calc((99.9% - 20px) / 3);
  }

  @include mq(mq1200) {
    width: calc((99.9% - 30px) / 4);
  }
}