.c-bank-heading {
  container: bank-heading / inline-size;
}

.bank-header-art {
  width: 310px;
  flex: 0 0 310px;
  height: 181px;
  margin: -20px -8px -13px 16px;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.bank-header-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bank-art-main-sheet,
.bank-art-back-sheet,
.bank-art-molecule {
  transform-box: fill-box;
  transform-origin: center;
  animation-play-state: paused;
}

.bank-art-main-sheet {
  animation: bank-sheet-breathe 8s ease-in-out infinite paused;
}

.bank-art-back-sheet {
  animation: bank-sheet-breathe 8s -2.5s ease-in-out infinite paused;
}

.bank-art-molecule {
  animation: bank-molecule-breathe 9s -1.5s ease-in-out infinite paused;
}

.bank-header-art.is-motion-visible:not(.is-motion-paused) .bank-art-main-sheet,
.bank-header-art.is-motion-visible:not(.is-motion-paused) .bank-art-back-sheet,
.bank-header-art.is-motion-visible:not(.is-motion-paused) .bank-art-molecule {
  animation-play-state: running;
}

@keyframes bank-sheet-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes bank-molecule-breathe {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(3deg); }
}

@media (max-width: 1150px) {
  .bank-header-art {
    width: 250px;
    flex-basis: 250px;
    height: 146px;
    margin-left: 0;
  }
}

@media (max-width: 760px), print {
  .bank-header-art { display: none; }
}

@container bank-heading (max-width: 680px) {
  .bank-header-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bank-header-art .bank-art-main-sheet,
  .bank-header-art .bank-art-back-sheet,
  .bank-header-art .bank-art-molecule {
    animation: none;
  }
}