/* Blog post */

.blog-post {
  margin: 0 auto;
  max-width: 960px;
}

.blog-post__meta {
  margin-bottom: 1.4rem;
}

.blog-post__meta a {
  text-decoration: underline;
}

.blog-post__timestamp {
  display: block;
}

.blog-post__tags svg {
  height: auto;
  margin-right: 0.35rem;
  width: 15px;
}

.blog-post__tag-link {
  font-size: 0.875rem;
}

/* Blog related posts */

.blog-related-posts {
  background-color: #F8FAFC;
}

.blog-related-posts h2 {
  text-align: center;
}

.blog-related-posts__list {
  display: flex;
  flex-wrap: wrap;
}

.blog-related-posts__post {
  flex: 0 0 100%;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 2);
  }
}

@media screen and (min-width: 1000px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 3);
  }
}

.blog-related-posts__image {
  height: auto;
  max-width: 100%;
}

.blog-related-posts__title {
  margin: 0.7rem 0;
}

/* Blog comments */

.blog-comments {
  margin: 0 auto;
  max-width: 680px;
}

.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
}

.blog-content {
  padding: 48px 0 0;
}
@media screen and (min-width: 768px) {
  .blog-content {
    padding: 72px 0 0;
  }
}
@media screen and (min-width: 992px) {
  .blog-content {
    padding: 96px 0 0;
  }
}
.sidebar-sticky {
  position: sticky;
  top: 120px;
  z-index: 100;
}
.blog-post__body {
  color: var(--gray-light-mode-700);
  font-size: 18px;
  line-height: 28px;
}
.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4,
.blog-post__body h5,
.blog-post__body strong {
  color: var(--text-heading);
  padding-top: 24px;
}
.blog-post__body h2 {
  padding-top: 24px;
}
.blog-post__body h2:first-child {
  padding-top: 0;
}
.blog-post__body ul,
.blog-post__body ol {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-post__body li::marker{
  font-weight: bold;
}
.blog-post__body a:not(.link):not(.btn) {
  color: var(--text-brand-dark);
  text-decoration: none;
}
.blog-post__body a:not(.link):not(.btn):hover {
  border-bottom: 1px solid var(--text-brand-dark);
}
.blog-post__body .image-wrapper img{
  width: 100%;
  height: auto;
}
.blog-post__body a.btn-primary {
  color: #101828;
  text-decoration: none;
}
.blog-detail-hero h1 {
  margin-top: 0;
}
.breadcrumb {
  display: flex;
  gap: 12px;
  list-style: none;
  align-items: center;
  margin-bottom: var(--space-7xl);
  padding: 0;
}

.breadcrumb li {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text-brand);
}
.breadcrumb li a{
  color: #D0D5DD;
  text-decoration: none;
}
.breadcrumb li a:hover{
  color: #fff;
  text-decoration: none;
}
.breadcrumb li a:focus{
  color: #D0D5DD;
  position: relative;
}
.breadcrumb li a:focus::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #91D1F8;
  bottom: -4px;
  left: 0;
}
.breadcrumb li a:active,
.breadcrumb li a:focus-visible{
  color: var(--text-brand);
}
.breadcrumb .last-item {
  display: inline-block;
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb .breadcrumb-item:first-child a:focus {
  color: var(--text-body);
}

.share-links {
  padding: 0;
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: center;
}
.end-section {
  border-top: 1px solid #0A60B04D;
  margin-top: 24px;
}
.end-section .section-item {
  padding: 24px 0;
  border-bottom: 1px solid #0A60B04D;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}
@media (min-width: 576px) {
  .end-section .section-item {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}
.end-section .section-item .section-item-label {
  text-transform: uppercase;
  color: var(--gray-light-mode-500);
}

@media (min-width: 576px) {
  .end-section .section-item .section-item-label {
    width: 104px;
    flex-basis: 104px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .large-label.end-section .section-item .section-item-label{
    width: 220px;
    flex-basis: 220px;
  }
}
.end-section .section-item .section-item-content {
  flex-grow: 1;
}
.end-section .section-item .section-item-content a {
  color: var(--text-brand-dark);
  text-decoration: none;
}
.tooltip-clipboard {
  display: none;
}
.blog-sharelink-hidden {
  display: none !important;
}
.blog-related-posts__card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 300ms ease;
  height: 100%;
}
.blog-related-posts__card:hover{
  box-shadow: 0px -2px 4px 0px rgba(75, 162, 255, 0.05), 0px 10px 15px 0px rgba(0, 59, 123, 0.10);
  transform: translateY(-8px);
}
.blog-related-posts__card:hover .link svg {
  transform: rotate(45deg);
}
.blog-related-posts__image-wrapper {
  height: 214px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.blog-related-posts__image-wrapper img {
  position: absolute:
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.card-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  overflow: hidden;
}
.card-title {
  margin-bottom: 16px;
}
.card-body {
  margin-bottom: 20px;
}
a.mask-link {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}
.blog-related-posts__content {
  padding: 24px;
  position: absolute;
  top: 214px;
  left: 0;
  right: 0;
  bottom: 0;
}
.card-user-avatar .user-headshot {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  flex-grow: 0;
  flex-shrink: 0;
  clip-path: path('M12.3465 0.617526C13.7924 -0.205842 15.541 -0.205842 16.9869 0.617526L26.8148 6.21398C28.3675 7.09818 29.3333 8.79511 29.3333 10.6391V21.3609C29.3333 23.2049 28.3675 24.9018 26.8148 25.786L16.9869 31.3825C15.541 32.2058 13.7924 32.2058 12.3465 31.3825L2.51854 25.786C0.965807 24.9018 0 23.2049 0 21.3609V10.6391C0 8.79511 0.965806 7.09818 2.51854 6.21398L12.3465 0.617526Z');
}
.card-user-avatar .user-headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-right: 16px;
}
.card-user-avatar .user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#hs_cos_wrapper_post_body p:first-child {
  margin-top: 0;
}