/* Preserve the supplied illustration's original proportions on desktop and mobile. */
.feature-art.app-preview {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  isolation: auto;
  container-type: inline-size;
}
.feature-art.app-preview::before,
.feature-art.app-preview::after { content: none; }
.app-preview .app-illustration-picture {
  display: block;
  width: 100%;
  aspect-ratio: 726 / 460;
}
.app-preview .app-illustration-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  filter: none;
}
.app-illustration-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.app-illustration-badge {
  --badge-lift: 4px;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  min-width: 18.8%;
  min-height: clamp(22px, 5cqw, 36px);
  padding: .45em .95em;
  border-radius: 999px;
  background: #ef32a5;
  color: #fff;
  font-size: clamp(8px, 1.8cqw, 13px);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 4px 18px #0002;
  animation: app-badge-float 3.2s ease-in-out infinite;
}
.app-badge-star {
  flex: none;
  font-size: .75em;
  line-height: 1;
}
.app-badge-games { left: 2.6%; top: 8.2%; }
.app-badge-online {
  right: 3.5%;
  top: 43%;
  animation-duration: 3.6s;
  animation-delay: -1.1s;
}
.app-badge-tags {
  left: 6.2%;
  bottom: 9.5%;
  background: #595181;
  animation-duration: 4s;
  animation-delay: -2s;
}
.app-badge-tags .app-badge-star { color: #e0f728; }
@keyframes app-badge-float {
  0%, 100% { transform: translateY(var(--badge-lift)); }
  50% { transform: translateY(calc(-1 * var(--badge-lift))); }
}
@media (max-width: 767px) {
  .feature-art.app-preview {
    flex: 0 0 auto;
    height: auto;
    margin-top: 16px;
    padding: 0;
    border-radius: 0;
  }
  .app-illustration-badge { --badge-lift: 2px; padding-inline: .65em; }
  .app-badge-online { right: 1.5%; }
  .app-badge-tags { left: 1.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .app-illustration-badge { animation: none; }
}