@mixin generate-post-margin($start, $divisible, $margin: 1.5rem) {
  @media screen and (min-width: $start) {
    margin-right: $margin !important;

    @for $i from 1 through 999 {
      @if $i % $divisible != 0 {
        &:nth-child(#{$i}) { margin-right: $margin !important; }
      } @else {
        &:nth-child(#{$i}) { margin-right: 0 !important; }
      }
    }
  }
}
.posts {
  @extend %section-margin;
  justify-content: flex-start;
  $side-padding: 1rem;
  $top-padding: 1rem;
  $bottom-padding: 0.5rem;

  > section { justify-content: initial; }

  > article > h2 {
    @extend %backendbr-styled-title;
  }

  section > article.tile {
    background-color: #fff;
    margin-bottom: 2rem !important;
    margin-right: 0 !important;

    @include generate-post-margin($tablet, 2);
    @include generate-post-margin($desktop, 3);

    > ul,
    > h4,
    > p {
      padding-right: 0.75rem;
      padding-left: 0.75rem;
    }
  }

  &--title, p {
    color: $text;
    
    a { 
      @extend %color-inherit;
    }
  }

  .posts--p {
    padding-bottom: $top-padding; 
  }

  &--thumbnail {
    width: 100%;
    height: 12rem;
    display: block;

    a {
      width: inherit;
      height: inherit;
      display: block;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      max-width: initial;
    }
  }

  &--categories {
    padding-top: $top-padding;
    padding-bottom: $bottom-padding;

    li {
      border-radius: 0.25rem;
      color: #fff;
      display: inline-block;
      background-color: $primary;
      padding: 0.25rem 0.5rem;
      margin-right: 0.25rem;
      margin-bottom: 0.5rem;

      a { 
        @extend %color-inherit;
      }

      @media screen and (min-width: $tablet) {
        margin-bottom: 0;
      }
    }
  }
}
