/* ===== Glitch Bard Component ===== */
.bard {
  margin: 0 auto 30px;
  width: 100%;
  max-width: 65em;
  height: auto;
  aspect-ratio: 1 / 0.95;
  font-size: 2px;
  flex-shrink: 0;
}

.strip {
  overflow: hidden;
  position: relative;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background-size: 100% auto;
  background-image: url('/src/img/bard.png');
}

@media (max-width: 768px) {
  .bard { font-size: 3px; }
}
@media (max-width: 400px) {
  .bard { aspect-ratio: 1 / 1; }
}