body.blog-page-open{
  overflow:hidden;
}

.blog-section.blog-page{
  position:fixed;
  inset:0;
  z-index:133;
  width:100%;
  height:100vh;
  margin:0;
  padding:104px max(22px,calc((100vw - 1240px)/2)) 46px;
  overflow:auto;
  border:0;
  border-radius:0;
  background:linear-gradient(135deg,rgba(247,251,246,.96),rgba(234,244,235,.94));
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:.22s;
}

.blog-section.blog-page.open{
  opacity:1;
  visibility:visible;
  transform:none;
}

.blog-page-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:74px;
  padding:0 max(22px,calc((100vw - 1240px)/2));
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--md-outline-variant);
  background:rgba(248,252,247,.86);
  backdrop-filter:blur(22px);
  z-index:2;
}

.blog-page-header .account-back{
  justify-self:start;
}

.blog-page-header>span:last-child{
  justify-self:end;
}

.blog-section.blog-page .section-heading{
  margin-bottom:30px;
}

.blog-section.blog-page .section-heading h2{
  font-size:clamp(42px,5vw,74px);
  letter-spacing:-3px;
}

.blog-section.blog-page .section-heading p{
  max-width:820px;
  font-size:15px;
}

.blog-section.blog-page .blog-feed{
  margin-top:24px;
}

:root[data-theme="dark"] .blog-section.blog-page{
  background:linear-gradient(135deg,rgba(16,22,18,.97),rgba(25,36,29,.96));
}

:root[data-theme="dark"] .blog-page-header{
  background:rgba(27,34,29,.88);
}

@media(max-width:820px){
  .blog-section.blog-page{
    padding:88px 14px 34px;
  }

  .blog-page-header{
    height:66px;
    padding:0 12px;
  }

  .blog-section.blog-page .section-heading h2{
    font-size:38px;
    letter-spacing:-2px;
  }
}