.feature-icon {
  width: 1.45em;
  height: 1.45em;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: -0.34em;
}

.feature-icon-title {
  width: 38px;
  height: 38px;
  margin-right: 8px;
  vertical-align: middle;
  filter: drop-shadow(0 3px 2px rgba(50, 35, 58, 0.12));
}

.feature-icon-nav {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: middle;
}

.feature-icon-sheet {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(50, 35, 58, 0.1));
}

.feature-title {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.feature-title[data-feature-icon]::before {
  content: "";
  width: 38px;
  height: 38px;
  margin-right: 8px;
  flex: 0 0 auto;
  background: var(--feature-src) center / contain no-repeat;
  filter: drop-shadow(0 3px 2px rgba(50, 35, 58, 0.12));
}

.welcome-feature-icon {
  width: clamp(112px, 22vw, 168px);
  height: clamp(112px, 22vw, 168px);
  object-fit: contain;
  animation: bounceFloat 2.2s ease-in-out infinite;
  filter: drop-shadow(0 12px 0 rgba(240, 214, 181, 0.72));
}

.game-preview-img.feature-art,
.interactive-game-card > img.feature-art {
  object-fit: contain;
  object-position: center;
  padding: 7% 10% 13%;
  box-sizing: border-box;
  background: linear-gradient(145deg, #fffdf8, #f5f0ff);
}

.office-tool-icon.feature-art {
  width: clamp(46px, 56%, 84px);
  height: clamp(46px, 56%, 84px);
  border-radius: 0;
  background: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgba(50, 35, 58, 0.12));
}

.portal-office-modal-grid .office-tool-icon.feature-art {
  width: 62px;
  height: 62px;
}

.auth-logo .feature-icon,
.auth-logo .feature-logo {
  width: 104px;
  height: 104px;
  margin: 0 auto;
  object-fit: contain;
}

.feature-page-hero-icon {
  width: clamp(72px, 12vw, 112px);
  height: clamp(72px, 12vw, 112px);
  object-fit: contain;
  filter: drop-shadow(0 7px 4px rgba(50, 35, 58, 0.13));
}

@media (max-width: 720px) {
  .feature-icon-title {
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }

  .feature-title[data-feature-icon]::before {
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }

  .feature-icon-sheet {
    width: 46px;
    height: 46px;
  }

  .mobile-sheet-grid .feature-icon-sheet {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-feature-icon {
    animation: none;
  }
}