.card-sprite{
  position:relative;
  z-index:3;
  flex:none;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 9px 0 #020407) drop-shadow(0 0 13px color-mix(in srgb,var(--accent) 32%,transparent));
  transform:translateZ(0);
  will-change:background-position;
}

.sprite-learn{
  width:min(88%,250px);
  height:205px;
  background-image:url("assets/card-sprites/aprender-loop-v3.png");
  background-size:600% auto;
  background-position:0 50%;
}

.sprite-download{
  width:min(82%,225px);
  height:205px;
  background-image:url("assets/card-sprites/descargar-hover-v1.png");
  background-size:600% auto;
  background-position:0 46%;
}

.sprite-course{
  width:min(54%,142px);
  height:218px;
  background-image:url("assets/card-sprites/cursos-loop-v1.png");
  background-size:800% auto;
  background-position:0 50%;
}

.sprite-service{
  width:min(86%,235px);
  height:205px;
  background-image:url("assets/card-sprites/servicio-hover-v3.png");
  background-size:900% auto;
  background-position:50% 50%;
}

.pixel-card:hover .sprite-learn,
.pixel-card:focus-visible .sprite-learn,
.pixel-card.is-pressed .sprite-learn,
.pixel-card:hover .sprite-download,
.pixel-card:focus-visible .sprite-download,
.pixel-card.is-pressed .sprite-download{
  animation:ecgSpriteSix 1.25s steps(5,end) infinite;
}

.pixel-card:hover .sprite-course,
.pixel-card:focus-visible .sprite-course,
.pixel-card.is-pressed .sprite-course{
  animation:ecgSpriteEight 2.15s steps(7,end) infinite;
}

.pixel-card:hover .sprite-service,
.pixel-card:focus-visible .sprite-service,
.pixel-card.is-pressed .sprite-service{
  animation:ecgSpriteNine 1.55s steps(8,end) infinite;
}

.theme-course .progress-pixels{z-index:4}

@keyframes ecgSpriteSix{
  from{background-position-x:0}
  to{background-position-x:100%}
}

@keyframes ecgSpriteEight{
  from{background-position-x:0}
  to{background-position-x:100%}
}

@keyframes ecgSpriteNine{
  from{background-position-x:0}
  to{background-position-x:100%}
}

@media(max-width:650px){
  .sprite-learn{width:min(82vw,285px);height:205px}
  .sprite-download{width:min(76vw,245px);height:205px}
  .sprite-course{width:min(45vw,150px);height:220px}
  .sprite-service{width:min(78vw,260px);height:205px}
}

@media(prefers-reduced-motion:reduce){
  .sprite-learn,.sprite-download,.sprite-course{animation:none!important;background-position-x:0}
  .sprite-service{animation:none!important;background-position-x:50%}
}