.blog-index,
.blog-article {
  width:min(100% - 32px, 1180px);
  margin-inline:auto;
  padding:clamp(1.5rem, 3vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
}

.blog-hero,
.blog-article-hero,
.blog-article-content,
.blog-related,
.blog-card {
  border-color:var(--tp-theme-border, var(--tp-public-border));
  background:var(--tp-theme-surface, rgba(255, 255, 255, .06));
}

.blog-hero,
.blog-article-hero {
  padding:clamp(1.2rem, 3vw, 2rem);
  margin-bottom:var(--tp-space-5);
}

.blog-hero {
  max-width:860px;
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--tp-space-5);
}

.blog-card {
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:0;
}

.blog-card-media,
.blog-article-media {
  display:block;
  overflow:hidden;
  background:var(--tp-theme-surface-muted, rgba(255, 255, 255, .04));
}

.blog-card-media img,
.blog-article-media img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog-card-media {
  aspect-ratio:16 / 9;
}

.blog-card-body {
  display:grid;
  gap:var(--tp-space-3);
  padding:clamp(1rem, 2vw, 1.25rem);
}

.blog-card h2,
.blog-related h2,
.blog-article-content h2 {
  margin:0;
  color:inherit;
}

.blog-card h2 {
  font-size:var(--tp-text-xl);
  line-height:1.15;
}

.blog-card a,
.blog-breadcrumb a,
.blog-related-link,
.blog-read-link {
  color:inherit;
  text-decoration:none;
}

.blog-card h2 a:hover,
.blog-breadcrumb a:hover,
.blog-related-link:hover strong,
.blog-read-link:hover {
  color:var(--tp-primary);
}

.blog-card p,
.blog-article-content p,
.blog-article-content li,
.blog-related-link span,
.blog-breadcrumb {
  color:var(--tp-theme-text-muted, var(--tp-public-text-muted));
  line-height:1.68;
}

.blog-meta-row {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .75rem;
  align-items:center;
  color:var(--tp-theme-text-muted, var(--tp-public-text-muted));
  font-size:var(--tp-text-sm);
  font-weight:800;
}

.blog-meta-row span:first-child {
  color:var(--tp-primary);
}

.blog-read-link {
  justify-self:start;
  color:var(--tp-primary);
  font-weight:900;
}

.blog-breadcrumb {
  margin-bottom:var(--tp-space-4);
  font-weight:900;
}

.blog-article-hero {
  display:grid;
  grid-template-columns:minmax(0, .88fr) minmax(360px, 1.12fr);
  gap:clamp(1rem, 3vw, 2rem);
  align-items:center;
}

.blog-article-copy {
  display:grid;
  gap:var(--tp-space-3);
}

.blog-article-copy .tp-title {
  font-size:clamp(2.4rem, 1.5rem + 3vw, 4.4rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.blog-article-media {
  aspect-ratio:16 / 10;
  border-radius:var(--tp-radius-xl);
  border:1px solid var(--tp-theme-border, var(--tp-public-border));
}

.blog-article-layout {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 320px);
  gap:var(--tp-space-5);
  align-items:start;
}

.blog-article-content {
  display:grid;
  gap:var(--tp-space-6);
  padding:clamp(1.25rem, 3vw, 2rem);
}

.blog-article-content section {
  display:grid;
  gap:var(--tp-space-3);
}

.blog-article-content h2 {
  font-size:var(--tp-text-2xl);
  letter-spacing:-.025em;
}

.blog-article-content p,
.blog-article-content ul {
  margin:0;
}

.blog-article-content ul {
  display:grid;
  gap:.7rem;
  padding-left:1.25rem;
}

.blog-product-note {
  display:grid;
  gap:var(--tp-space-3);
  padding:clamp(1rem, 2vw, 1.25rem);
  border:1px solid color-mix(in srgb, var(--tp-primary) 32%, var(--tp-theme-border, transparent));
  border-radius:var(--tp-radius-xl);
  background:color-mix(in srgb, var(--tp-primary) 10%, transparent);
}

.blog-product-note p {
  color:var(--tp-theme-text-muted, var(--tp-public-text-muted));
}

.blog-product-note .tp-button {
  justify-self:start;
}

.blog-related {
  position:sticky;
  top:var(--tp-space-5);
  display:grid;
  gap:var(--tp-space-3);
  padding:clamp(1rem, 2vw, 1.25rem);
}

.blog-related-link {
  display:grid;
  gap:.35rem;
  padding-top:var(--tp-space-3);
  border-top:1px solid var(--tp-theme-border, var(--tp-public-border));
}

.blog-related-link strong {
  color:var(--tp-theme-text, var(--tp-public-text));
  line-height:1.25;
}

@media (max-width: 980px) {
.blog-grid,
  .blog-article-layout,
  .blog-article-hero {
    grid-template-columns:1fr;
  }

  .blog-related {
    position:static;
  }
}

@media (max-width: 680px) {
.blog-index,
  .blog-article {
    width:min(100% - 24px, 1180px);
    padding-top:var(--tp-space-4);
  }

  .blog-grid {
    gap:var(--tp-space-4);
  }

  .blog-article-copy .tp-title {
    font-size:clamp(2rem, 14vw, 3rem);
  }
}