.mx-blog-index-intro {
  margin: 0 0 1.25rem;
}

.mx-blog-index-intro p {
  max-width: 72ch;
}

.mx-blog-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 2rem;
}

.mx-blog-card {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,252,255,.95) 26%, rgba(238,246,255,.87) 100%);
  box-shadow: var(--mx-shadow2);
  overflow: hidden;
}

.mx-blog-card__media {
  display: block;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(22,191,208,.10), rgba(255,180,106,.14));
}

.mx-blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.mx-blog-card__body {
  padding: 1.1rem 1.1rem 1.2rem 0;
}

.mx-blog-card__body h2 {
  margin: 0 0 .55rem;
  font-size: 1.4rem;
}

.mx-blog-card__body h2 a {
  text-decoration: none;
}

.mx-blog-card__body p {
  margin: 0;
}

.mx-blog-card__body p + p {
  margin-top: .75rem;
}

.mx-blog-card__eyebrow {
  margin-bottom: .45rem !important;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mx-muted);
  font-weight: 800;
}

.mx-blog-card__cta a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.mx-blog-card__cta a::after {
  content: "→";
}

.mx-blog-callout {
  margin: 1.25rem 0;
  padding: .95rem 1rem;
  border: 1px solid rgba(22,191,208,.24);
  border-left: 4px solid rgba(22,191,208,.58);
  border-radius: 0 var(--mx-radius2) var(--mx-radius2) 0;
  background: linear-gradient(180deg, rgba(22,191,208,.09), rgba(255,255,255,.92));
}

.mx-blog-callout p {
  margin: 0;
}

.mx-blog-figure {
  margin: 1.4rem 0;
  padding: 1rem;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  background: rgba(255,255,255,.92);
  box-shadow: var(--mx-shadow2);
}

.mx-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--mx-radius) - 6px);
}

.mx-blog-figure figcaption {
  margin-top: .75rem;
  color: var(--mx-muted);
  font-size: .96rem;
}

.mx-blog-figure--diagram img {
  background: #fff;
}

@media (max-width: 760px) {
  .mx-blog-card {
    grid-template-columns: 1fr;
  }

  .mx-blog-card__body {
    padding: 0 1rem 1rem;
  }
}