.blog-article {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 28px);
}
.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;
  align-self: center;
}
.blog-article p.text-medium {
  grid-column: span 2;
  align-self: center;
  font-size: var(--fs-paragraph);
  line-height: 1.7;
}
.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,
.blog-article .screenshot-wide,
.blog-article .screenshot-narrow {
  border-radius: 12px;
  overflow: hidden;
  background: var(--clr-neutral-100);
  box-shadow: 0 8px 28px rgba(5, 56, 54, 0.08), 0 2px 6px rgba(5, 56, 54, 0.05);
}
.blog-article .screenshot-full img,
.blog-article .screenshot-wide img,
.blog-article .screenshot-narrow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-article .screenshot-full {
  grid-column: 1/-1;
}
.blog-article .screenshot-wide {
  grid-column: span 2;
  align-self: center;
}
.blog-article .screenshot-narrow {
  grid-column: span 1;
  align-self: center;
}
.blog-article > img {
  grid-column: 1/-1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(5, 56, 54, 0.08), 0 2px 6px rgba(5, 56, 54, 0.05);
}
.blog-article .screenshot-narrow + p:not([class]) {
  grid-column: span 1;
  margin-top: -8px;
  margin-bottom: 0.5em;
  font-size: var(--fs-100);
  line-height: 1.5;
  color: var(--clr-primary-800);
  font-style: italic;
  text-align: left;
  max-width: 52ch;
  justify-self: start;
}
.blog-article .screenshot-narrow.image-right + p:not([class]) {
  grid-column: 3/span 1;
  justify-self: end;
  text-align: right;
}
.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;
  }
  .blog-article .screenshot-narrow.image-right + p:not([class]) {
    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,
  .blog-article .screenshot-narrow + p:not([class]),
  .blog-article .screenshot-narrow.image-right + p:not([class]) {
    grid-column: 1/-1;
    justify-self: stretch;
    text-align: left;
  }
}

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