/*
 * Local layout for news articles with a leading image.
 * Keep the hero image as a direct child of .blog-article and add
 * .blog-article-layout--image-aligned to the article layout.
 */
@supports (display: contents) {
  @media (min-width: 1180px) {
    .blog-article-layout--image-aligned {
      row-gap: 0;
    }

    .blog-article-layout--image-aligned > .blog-article {
      display: contents;
    }

    .blog-article-layout--image-aligned > .blog-article > * {
      grid-column: 1;
      min-width: 0;
    }

    .blog-article-layout--image-aligned > .blog-article > h1 {
      grid-row: 1;
    }

    .blog-article-layout--image-aligned > .blog-article > .blog-article-image {
      grid-row: 2;
    }

    .blog-article-layout--image-aligned > .blog-article-sidebar {
      grid-column: 2;
      grid-row: 2;
      padding-top: 0;
    }
  }
}