.blog-article {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--size-400) var(--size-500);
}
.blog-article > * {
  grid-column: 1/-1;
  min-width: 0;
}
.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6 {
  grid-column: 1/-1;
}
.blog-article p.text-narrow {
  grid-column: span 1;
}
.blog-article p.text-medium {
  grid-column: span 2;
}
.blog-article p.text-wide {
  grid-column: 1/-1;
}
.blog-article p.text-medium.text-left {
  grid-column: 1/span 2;
}
.blog-article p.text-medium.text-right {
  grid-column: 2/-1;
}
.blog-article img,
.blog-article figure img {
  max-width: 100%;
  height: auto;
  display: block;
}
.blog-article figure {
  margin: 0;
}
.blog-article .screenshot-full {
  grid-column: 1/-1;
}
.blog-article .screenshot-wide {
  grid-column: span 2;
}
.blog-article .screenshot-narrow {
  grid-column: span 1;
}
.blog-article > p:has(> img.screenshot-full) {
  grid-column: 1/-1;
}
.blog-article > p:has(> img.screenshot-wide) {
  grid-column: span 2;
}
.blog-article > p:has(> img.screenshot-narrow) {
  grid-column: span 1;
}
.blog-article > p:has(> img.screenshot-narrow.image-left) {
  grid-column: 1/span 1;
}
.blog-article > p:has(> img.screenshot-narrow.image-right) {
  grid-column: 3/span 1;
}
.blog-article > div.screenshot-full {
  grid-column: 1/-1;
}
.blog-article > div.screenshot-wide {
  grid-column: span 2;
}
.blog-article > div.screenshot-narrow {
  grid-column: span 1;
}
.blog-article > div.screenshot-narrow.image-left {
  grid-column: 1/span 1;
}
.blog-article > div.screenshot-narrow.image-right {
  grid-column: 3/span 1;
}
.blog-article .screenshot-narrow.image-left {
  grid-column: 1/span 1;
}
.blog-article .screenshot-narrow.image-right {
  grid-column: 3/span 1;
}
.blog-article .align-left {
  justify-self: start;
}
.blog-article .align-center {
  justify-self: center;
}
.blog-article .align-right {
  justify-self: end;
}

@media (width <= 1024px) {
  .blog-article {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog-article > p:has(> img.screenshot-narrow.image-right) {
    grid-column: 2/span 1;
  }
  .blog-article > div.screenshot-narrow.image-right,
  .blog-article .screenshot-narrow.image-right {
    grid-column: 2/span 1;
  }
}
@media (width <= 640px) {
  .blog-article {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-article p.text-narrow,
  .blog-article p.text-medium,
  .blog-article p.text-wide,
  .blog-article p.text-medium.text-left,
  .blog-article p.text-medium.text-right,
  .blog-article > p:has(> img.screenshot-full),
  .blog-article > p:has(> img.screenshot-wide),
  .blog-article > p:has(> img.screenshot-narrow),
  .blog-article > p:has(> img.screenshot-narrow.image-left),
  .blog-article > p:has(> img.screenshot-narrow.image-right),
  .blog-article .screenshot-full,
  .blog-article .screenshot-wide,
  .blog-article .screenshot-narrow,
  .blog-article .screenshot-narrow.image-left,
  .blog-article .screenshot-narrow.image-right,
  .blog-article > div.screenshot-full,
  .blog-article > div.screenshot-wide,
  .blog-article > div.screenshot-narrow,
  .blog-article > div.screenshot-narrow.image-left,
  .blog-article > div.screenshot-narrow.image-right {
    grid-column: 1/-1;
    justify-self: stretch;
  }
}

/*# sourceMappingURL=blog-layout.css.map */