.troop-action-preview {
  display: grid;
  grid-template-columns: repeat(5, 48px);
  gap: 6px;
  margin-top: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 1px;
}

.troop-action-frame {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(255, 222, 128, .18);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.troop-action-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 400%;
  height: 500%;
  background: var(--troop-action-sheet) 0 0 / 100% 100% no-repeat;
  animation: troopActionFrames .64s steps(4) infinite;
}

.troop-action-frame.row-0 { --troop-row-y: 0%; }
.troop-action-frame.row-1 { --troop-row-y: -20%; }
.troop-action-frame.row-2 { --troop-row-y: -40%; }
.troop-action-frame.row-3 { --troop-row-y: -60%; }
.troop-action-frame.row-4 { --troop-row-y: -80%; }

@keyframes troopActionFrames {
  from { transform: translate(0, var(--troop-row-y)); }
  to { transform: translate(-75%, var(--troop-row-y)); }
}