.blog {
  background: var(--white); color: var(--text-dark);
  padding: calc(20px * var(--ps)) 0 calc(60px * var(--ps));
}
.blog__all-tags, .bcard__tags, .article__tag-list { list-style: none; padding: 0; margin: 0; }
.blog__all-tags { display: none; }
@media (min-width: 576px) {
  .blog__all-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
}
.blog__all-tags li { padding: 0 16px; font: 600 14px/22px var(--font-heading); word-break: break-word; }
.blog__grid { --cols: 1; display: flex; flex-wrap: wrap; row-gap: 12px; margin: 0 -6px; }
.blog__col { flex: 0 1 calc(100% / var(--cols)); max-width: calc(100% / var(--cols)); padding: 0 6px; }
@media (min-width: 414px) and (max-width: 767px) { .blog__grid { --cols: 2; } }
@media (min-width: 768px) { .blog__grid { --cols: 3; } }
@media (min-width: 1200px) { .blog__grid { row-gap: 24px; margin: 0 -12px; } .blog__col { padding: 0 12px; } }
.bcard { display: flex; flex-direction: column; height: 100%; background: var(--white); text-align: left; }
.bcard__top { flex: 1 1 auto; }
.bcard__media-wrap { position: relative; }
.bcard__media {
  position: relative; display: block; padding-top: 40%; margin: 0 0 19px; overflow: hidden;
  border-radius: var(--radius-section);
}
.bcard__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  border-radius: inherit; transition: transform .4s ease;
}
.bcard__media:hover img { transform: scale(1.03); }
.bcard__date {
  position: absolute; right: 13px; bottom: 17px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 26px);
  padding: 7px 11px; border-radius: var(--radius-section); background: var(--white); color: var(--text-dark);
  font-size: 14px; line-height: 18px;
}
.bcard__date strong { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 600; }
.bcard__body { padding-top: 7px; }
.bcard__heading { margin: 0; }
.bcard__heading a { color: var(--link); text-decoration: none; transition: color .3s ease; }
.bcard__heading a:hover { color: var(--text-dark); }
.bcard__excerpt { margin: 14px 0 0; font-size: 16px; line-height: 28px; word-break: break-word; }
.bcard__more {
  margin-left: 3px; padding: 3px; color: var(--text-dark);
  font: 600 14px/18px var(--font-heading); text-decoration: underline 1px;
}
.bcard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0 0; }
.bcard__tag {
  display: block; padding: 5px 7px; border-radius: 990px; background: var(--chip); color: var(--text-dark);
  font: 600 14px/18px var(--font-heading); word-break: break-word;
}
@media (min-width: 992px) { .bcard__tag { padding: 7px 13px; } }
.article { position: relative; z-index: 1; text-align: left; }
.article__container { max-width: 1230.64px; margin: 0 auto; padding: 0 var(--gutter); }
.article__wrap { padding: 15px; background: var(--white); color: var(--text-dark); }
@media (min-width: 768px) { .article__wrap { padding: 30px; } }
.article__feature { position: relative; margin: 0 0 18px; }
.article__author { display: flex; margin: 0 0 14px; }
.article__media { position: relative; padding-top: 44%; margin-top: -20%; }
.article__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  border-radius: var(--radius-section);
}
.article__date {
  position: absolute; right: 2%; bottom: 4%; display: inline-flex; flex-wrap: wrap; align-items: center;
  margin-top: 10px; padding: 7px 11px; border-radius: 990px; background: var(--brand); color: var(--on-brand);
  font: 14px/18px var(--font-heading);
}
.article__date strong { display: flex; align-items: center; font-weight: 600; }
.article__tags { margin: 0 0 30px; }
.article__tag-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; }
.article__tag {
  display: block; padding: 7px 13px; border-radius: 990px; background: var(--chip); color: var(--text-dark);
  font-size: 14px; line-height: 18px; font-weight: 600; word-break: break-word;
}
.article__title { margin: 0 0 21px; }
.article__heading { margin: 0; }
.article__content { margin: 0 0 26px; overflow: hidden; }
.article__content strong { font-weight: 700; }
.article__content ol, .article__content ul { margin: 12px 0; padding: 0 0 0 40px; }
.article__foot { border-top: 1px solid var(--line); }
.article__share { padding-top: 21px; margin-bottom: 14px; }
@media (min-width: 1024px) {
  .article__foot { display: flex; align-items: center; gap: 20px; }
  .article__share { margin-bottom: 0; }
}
.share { position: relative; }
.share__opener {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 5px 10px; margin: 0;
  border: 0; background: transparent; color: var(--link); text-align: center;
  font-family: var(--font-body); font-size: revert; line-height: normal; 
  transition: color .3s ease;
}
.share__opener:hover { color: var(--text-dark); }
.share__title { display: flex; align-items: center; gap: 10px; }
.share__i { display: block; height: 19px; font-style: normal; } 
.share__icn { display: block; width: 16px; height: 16px; }
.share__panel {
  position: absolute; left: 0; bottom: 100%; z-index: 5; width: 273px; padding: 40px 60px 10px 10px; margin-bottom: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-section);
  box-shadow: 0 4px 30px var(--black-a10);
}
.share__panel[hidden] { display: none; }
@media (min-width: 576px) { .share__panel { width: 350px; } }
.share__label { position: absolute; top: 12px; left: 12px; font-size: 14px; line-height: 22px; color: var(--text-dark); }
.share__url {
  width: 100%; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-input);
  background: var(--white); color: var(--text-dark); font-size: 14px;
}
.share__copy {
  position: absolute; right: 10px; bottom: 10px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius-button);
  background: var(--brand); color: var(--on-brand); font: 500 12px/1 var(--font-body);
}
.share__msg { position: absolute; top: 12px; right: 12px; font-size: 12px; color: var(--text-soft); }