//----------------------------------------------
// Posts
//----------------------------------------------
.posts {
  padding: 1em 1em 3em;

  @media (min-width: $mq-small) {
    padding: {
      right: 2em;
      left: 2em;
    }
  }

  @media (min-width: $mq-med) {
    padding: {
      right: 1em;
      left: 1em;
    }
  }

  @media (min-width: $mq-xlarge) {
    padding: {
      top: 2em;
      bottom: 4em;
    }
  }

  &__container {
    margin: {
      right: -1em;
      left: -1em;
    }

    &[data-columns]:before {
      @media screen and (max-width: $mq-med) {
        content: '1 .column.posts-full';
      }

      @media screen and (min-width: $mq-med) and (max-width: $mq-xlarge) {
        content: '2 .column.posts-half';
      }

      @media screen and (min-width: $mq-xlarge) {
        content: '3 .column.posts-third';
      }
    }

    &:after {
      content: "";

      display: table;
      clear: both;
    }
  }

  &__post {
    padding: 2em 1em;

    // @media (min-width: $mq-small) {
    //   padding: {
    //     top: 4em;
    //     bottom: 4em;
    //   }
    // }
  }

  &__link {
    display: block;

    color: $color-white;

    &:hover {
      .posts__img {
        transform: translate3d(0, -10px, 0);
      }
    }
  }

  &__img {
    margin-bottom: 1em;

    background-color: $color-lightgrey;
    transition: transform 400ms ease-in-out;

    img {
      display: block;
    }
  }

  &__text {
    @extend %font-size;

    font-weight: 400;
  }

  &__pagination {
    @extend %text-center;

    @media (min-width: $mq-small) {
      padding-top: 1em;
    }
  }

  &__next {
    @extend %font-header;

    position: relative;
    z-index: 1;

    cursor: pointer;

    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;

      margin: auto;

      border-radius: 100%;
      opacity: 0;
      transition: opacity 400ms ease-in-out;
    }

    &:after {
      height: 1.75em;
      width: 1.75em;

      border: 2px solid transparent;
      border-top-color: $color-grey;
      animation: spin 1s linear infinite both;
    }

    &:before {
      height: 2.5em;
      width: 2.5em;

      border: 1px solid transparent;
      border: {
        top-color: $color-grey;
        right-color: $color-grey;
      }
      animation: spin-reverse 1.2s linear infinite both;
    }

    &.js-posts-loading {
      &:before,
      &:after {
        opacity: 1;
      }
    }
  }
}

//----------------------------------------------
// Salvattore
//----------------------------------------------
.column {
  float: left;
}

.posts-full {
  width: 100%;
}

.posts-half {
  width: 50%;
}

.posts-third {
  width: calc(1 / 3 * 100%);
}
