.blog-post-page {
  padding-top: min(40px, 40 / 1490 * 100vw);
}
.blog-post-page .breadcrumbs {
  display: flex;
  gap: min(8px, 8 / 1490 * 100vw);
  font-size: min(14px, 14 / 1490 * 100vw);
  font-family: "Montserrat", sans-serif;
  color: #7B758C;
  margin-bottom: min(40px, 40 / 1490 * 100vw);
  align-items: center;
}
.blog-post-page .breadcrumbs .crumb {
  text-decoration: none;
  color: inherit;
}
.blog-post-page .breadcrumbs .crumb:hover {
  color: #000;
}
.blog-post-page .breadcrumbs .crumb.active {
  color: #0E0722;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(300px, 300 / 1490 * 100vw);
}
.blog-post-page .post-content-wrapper {
  width: min(1213px, 1213 / 1490 * 100vw);
  margin: 0 auto;
}
.blog-post-page .post-header-grid {
  width: 100%;
  display: grid;
  grid-template-columns: min(460px, 460 / 1490 * 100vw) 1fr;
  gap: min(88px, 88 / 1490 * 100vw);
  margin-bottom: min(88px, 88 / 1490 * 100vw);
  align-items: flex-start;
}
.blog-post-page .image-placeholder {
  width: 100%;
  height: auto; /* q-img handles ratio */
  background-color: #E7E7F2;
  border-radius: min(32px, 32 / 1490 * 100vw);
}
.blog-post-page .post-header-info {
  display: flex;
  flex-direction: column;
  padding-top: min(20px, 20 / 1490 * 100vw);
}
.blog-post-page .post-meta-top {
  font-family: "Montserrat", sans-serif;
  font-size: min(14px, 14 / 1490 * 100vw);
  color: #0E0722;
  margin-bottom: min(20px, 20 / 1490 * 100vw);
  display: flex;
  align-items: center;
  gap: min(24px, 24 / 1490 * 100vw);
}
.blog-post-page .post-meta-top .meta-read svg {
  display: block;
  width: min(16px, 16 / 1490 * 100vw);
  height: min(16px, 16 / 1490 * 100vw);
  margin-right: min(4px, 4 / 1490 * 100vw);
}
.blog-post-page .post-title {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: min(48px, 48 / 1490 * 100vw);
  line-height: 120%;
  font-weight: 700;
  letter-spacing: -2%;
  margin-bottom: min(32px, 32 / 1490 * 100vw);
}
.blog-post-page .author-info {
  display: flex;
  align-items: center;
  gap: min(16px, 16 / 1490 * 100vw);
  margin-top: auto;
}
.blog-post-page .author-info .author-avatar {
  width: min(48px, 48 / 1490 * 100vw);
  height: min(48px, 48 / 1490 * 100vw);
  background: #E7E7F2;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.blog-post-page .author-info .author-name {
  font-weight: 700;
  font-size: min(18px, 18 / 1490 * 100vw);
  margin-bottom: min(9px, 9 / 1490 * 100vw);
  text-decoration: underline;
  font-family: "Montserrat Alternates", sans-serif;
}
.blog-post-page .author-info .author-role {
  font-size: min(15px, 15 / 1490 * 100vw);
  color: #0E0722;
  max-width: min(420px, 420 / 1490 * 100vw);
  line-height: 140%;
  font-family: "Montserrat", sans-serif;
}
.blog-post-page .post-body {
  font-family: "Montserrat", sans-serif;
  font-size: min(18px, 18 / 1490 * 100vw);
  line-height: 160%;
  color: #0E0722;
  margin-bottom: min(80px, 80 / 1490 * 100vw);
  max-width: min(888px, 888 / 1490 * 100vw);
  margin-left: auto;
  margin-right: auto;
}
.blog-post-page .post-body p {
  margin-bottom: min(32px, 32 / 1490 * 100vw);
}
.blog-post-page .post-body h2 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: min(32px, 32 / 1490 * 100vw);
  margin: min(68px, 68 / 1490 * 100vw) 0 min(32px, 32 / 1490 * 100vw);
  font-weight: 700;
}
.blog-post-page .post-body h3 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: min(24px, 24 / 1490 * 100vw);
  margin: min(48px, 48 / 1490 * 100vw) 0 min(24px, 24 / 1490 * 100vw);
  font-weight: 700;
}
.blog-post-page .post-body ul {
  margin-bottom: min(32px, 32 / 1490 * 100vw);
  padding-left: min(34px, 34 / 1490 * 100vw);
}
.blog-post-page .post-body ul li {
  line-height: 160%;
}
.blog-post-page .post-body ul li::marker {
  color: #854AFB;
}
.blog-post-page .post-body ul li p {
  margin-bottom: min(16px, 16 / 1490 * 100vw);
}
.blog-post-page .post-body img {
  max-width: 100%;
  border-radius: min(24px, 24 / 1490 * 100vw);
  margin: min(32px, 32 / 1490 * 100vw) 0;
}
.blog-post-page .post-body a {
  color: #854AFB;
  text-decoration: underline;
}
.blog-post-page .post-body a:hover {
  text-decoration: none;
}
.blog-post-page .post-body hr {
  margin: min(68px, 68 / 1490 * 100vw) 0;
  border: min(2px, 2 / 1490 * 100vw) solid #DADDEB;
}
.blog-post-page .post-body blockquote {
  margin: min(48px, 48 / 1490 * 100vw) 0;
  padding: 0 min(32px, 32 / 1490 * 100vw);
  line-height: 160%;
  border-left: min(4px, 4 / 1490 * 100vw) solid #854AFB;
}
body.mobile .blog-post-page {
  padding-top: calc(20 / 375 * 100dvw);
}
body.mobile .blog-post-page .breadcrumbs {
  display: none;
}
body.mobile .blog-post-page .post-content-wrapper {
  width: 100%;
  max-width: 100%;
}
body.mobile .blog-post-page .post-header-grid {
  grid-template-columns: 1fr;
  gap: calc(26 / 375 * 100dvw);
  margin-bottom: calc(32 / 375 * 100dvw);
}
body.mobile .blog-post-page .post-header-grid .post-header-image {
  order: 2;
}
body.mobile .blog-post-page .post-header-grid .post-header-info {
  order: 1;
}
body.mobile .blog-post-page .image-placeholder {
  border-radius: calc(24 / 375 * 100dvw) !important;
}
body.mobile .blog-post-page .post-header-info {
  padding-top: 0;
}
body.mobile .blog-post-page .post-title {
  font-size: calc(28 / 375 * 100dvw);
  margin-bottom: calc(24 / 375 * 100dvw);
}
body.mobile .blog-post-page .post-meta-top {
  font-size: calc(12 / 375 * 100dvw);
  margin-bottom: calc(16 / 375 * 100dvw);
}
body.mobile .blog-post-page .author-info {
  gap: calc(16 / 375 * 100dvw);
}
body.mobile .blog-post-page .author-info .author-avatar {
  width: calc(50 / 375 * 100dvw);
  height: calc(50 / 375 * 100dvw);
}
body.mobile .blog-post-page .author-info .author-name {
  font-size: calc(14 / 375 * 100dvw);
  margin-bottom: calc(8 / 375 * 100dvw);
  text-decoration: none;
}
body.mobile .blog-post-page .author-info .author-role {
  font-size: calc(12 / 375 * 100dvw);
  max-width: 100%;
}
body.mobile .blog-post-page .post-body {
  font-size: calc(15 / 375 * 100dvw);
  line-height: 160%;
  max-width: 100%;
  margin-bottom: calc(60 / 375 * 100dvw);
}
body.mobile .blog-post-page .post-body h2 {
  font-size: calc(24 / 375 * 100dvw);
  margin-top: calc(32 / 375 * 100dvw);
  margin-bottom: calc(16 / 375 * 100dvw);
}
body.mobile .blog-post-page .post-body h3 {
  font-size: calc(20 / 375 * 100dvw);
  margin-top: calc(24 / 375 * 100dvw);
  margin-bottom: calc(12 / 375 * 100dvw);
}
body.mobile .blog-post-page .post-body hr {
  margin: calc(40 / 375 * 100dvw) 0;
}