/* Uses the existing post__group spacing and post__editor 900px content width. */
.harmoBanner__link {
  display: block;
  border: 1px solid #e5e7eb;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  aspect-ratio: var(--harmo-pc-ratio, 2115 / 744);
}
/* Opposing blue corners shorten without changing the banner's layout box. */
.harmoBanner__link::before,
.harmoBanner__link::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0 solid #4591C5;
  opacity: 0;
  pointer-events: none;
  transition: width 250ms ease, height 250ms ease, opacity 250ms ease;
}
.harmoBanner__link::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.harmoBanner__link::after { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.harmoBanner__link:focus-visible::before,
.harmoBanner__link:focus-visible::after {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  opacity: 1;
}
.harmoBanner__link:focus-visible {
  outline: 3px solid #4991D8;
  outline-offset: 4px;
}
.harmoBanner__link picture,
.harmoBanner__link img {
  display: block;
  width: 100%;
  height: 100%;
}
.harmoBanner__link img { object-fit: contain; opacity: 1; transition: opacity 250ms ease; }
@media (hover: hover) and (pointer: fine) {
  .harmoBanner__link:hover::before,
  .harmoBanner__link:hover::after {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    opacity: 1;
  }
  .harmoBanner__link:hover img { opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .harmoBanner__link::before,
  .harmoBanner__link::after,
  .harmoBanner__link img { transition: none; }
}
.harmoBanner__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; }
.harmoBanner.is-loaded .harmoBanner__fallback { visibility: hidden; }
@media screen and (max-width: 768px) {
  .harmoBanner__link { aspect-ratio: var(--harmo-sp-ratio, 1122 / 1402); }
}
.harmoBanner__noscript{display:block;width:100%;border:0;aspect-ratio:2115 / 744}
@media screen and (max-width:768px){.harmoBanner__noscript{aspect-ratio:1122 / 1402}}