// viewport s - m
@include viewport--l('inversed') {
  .blog-article {
    .block + .block,
    &__side + &__main {
      margin-bottom: $spacing--m;
      margin-top: $spacing--m;
    }

    &__main {
      border-radius: $border-radius;
    }
  }
}
// viewport l
@include viewport--l {
  .blog-article {
    display: flex;
    padding-bottom: $spacing--xl;
    padding-top: $spacing--xl;

    .block + .block {
      margin-top: $spacing--l;
    }

    &__main {
      width: grid-columns(7, 12);
    }

    &__side {
      margin-left: auto;
      order: 2;
      width: grid-columns(4, 12);
    }
  }
}