.entry .entry-content h2{
  --h2-bg:       #328edd;  
  --h2-fg:       #fff;     
  --h2-bar:      #ffc53d;  
  --h2-radius:   10px;
  --h2-pad-y:    12px;
  --h2-pad-x:    clamp(14px, 2.2vw, 28px);
  --h2-bar-w:    6px;       
  --h2-bar-h:    24px;       
  --h2-bar-gap:  8px;     

  position: relative;
  margin: 0 0 14px;
  padding: var(--h2-pad-y)
           calc(var(--h2-pad-x) + var(--h2-bar-gap) + var(--h2-bar-w));

  color: var(--h2-fg);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    var(--h2-bg);
  border-radius: var(--h2-radius);
  box-shadow: 0 1px 0 rgba(0,0,0,.08) inset, 0 4px 14px rgba(0,0,0,.12);
  font-weight: 800;
  font-size: clamp(1.125rem, 1.02rem + 0.8vw, 1.6rem);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.entry .entry-content h2::before,
.entry .entry-content h2::after{
  content:"";
  position:absolute; top:50%;
  width:var(--h2-bar-w); height:var(--h2-bar-h);
  transform:translateY(-50%);
  border-radius:4px;
  background:var(--h2-bar);
  pointer-events:none;
}
.entry .entry-content h2::before{ left: var(--h2-pad-x); }
.entry .entry-content h2::after { right: var(--h2-pad-x); }
.entry .entry-content h2 + p{ margin-top:8px; }
@media (max-width:640px){
  .entry .entry-content h2{
    text-align:left;
    --h2-pad-y: 10px;
    --h2-bar-h: 20px;
  }
}
@media (prefers-reduced-motion:reduce){
  .entry .entry-content h2{ box-shadow:none; background: var(--h2-bg); }
}
@media (max-width:640px){
  .entry .entry-content h2{
    text-align:center;
    --h2-pad-y: 10px; 
    --h2-bar-h: 20px; 
    --h2-pad-x: clamp(10px, 4vw, 16px);
  }
  .entry .entry-content h2::before{ left:  var(--h2-pad-x); }
  .entry .entry-content h2::after { right: var(--h2-pad-x); }
}