/* Clay icon style v1 — soft PNG assets replacing stroke SVG / Bootstrap Icons */

.icon--clay,
img.clay-bi {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

.product-teaser-icon .icon--clay,
.product-teaser-icon .icon {
  width: 2.75rem;
  height: 2.75rem;
}

.hero-results-demo__badge .icon--clay,
.hero-results-demo__badge .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.hero-results-demo__iconcard-icon .icon--clay,
.hero-results-demo__iconcard-icon .icon {
  width: 2.35rem;
  height: 2.35rem;
}

.results-inline-icon .icon--clay,
.results-inline-icon .icon {
  width: 2.15rem;
  height: 2.15rem;
}

.wp4-kit-card .results-inline-icon .icon--clay,
.wp4-kit-card .results-inline-icon .icon {
  width: 1.95rem;
  height: 1.95rem;
}

.results-tool-link--trainings.btn-with-icon .icon--clay,
.results-tool-link--trainings .icon--clay,
.results-tool-link--trainings img.clay-bi {
  width: 1.7rem;
  height: 1.7rem;
}

.highlight-icon .icon--clay,
.highlight-icon img.clay-bi {
  width: 4.75rem;
  height: 4.75rem;
}

.topic-card-icon .icon--clay,
.topic-card-icon img.clay-bi {
  width: 1.85rem;
  height: 1.85rem;
}

.topic-cards--header .topic-card-icon .icon--clay,
.topic-cards--header .topic-card-icon img.clay-bi {
  width: 2.65rem;
  height: 2.65rem;
}

.group-divider-label .icon--clay,
.group-divider-label img.clay-bi,
.group-divider-icon .icon--clay,
.group-divider-icon img.clay-bi {
  width: 1.85rem;
  height: 1.85rem;
}

.catalog-header-icon .icon--clay,
.catalog-header-icon img.clay-bi {
  width: 2.1rem;
  height: 2.1rem;
}

/* Match Bootstrap bi-wrench diagonal + larger hit in trainings UI */
img.clay-bi[data-from-bi="bi-wrench"],
img.icon--clay[src*="wrench-v1"] {
  transform: rotate(-45deg);
  transform-origin: center center;
}

.catalog-header-icon img.clay-bi[data-from-bi="bi-wrench"],
.catalog-header-icon img.icon--clay[src*="wrench-v1"] {
  width: 2.65rem;
  height: 2.65rem;
}

.nav-ecosystem__segment--f3 .nav-eco-local a.nav-eco-local__link--trainings img.clay-bi[data-from-bi="bi-wrench"],
.nav-ecosystem__segment--f3 .nav-eco-local a.nav-eco-local__link--trainings img.icon--clay[src*="wrench-v1"] {
  width: 1.35rem;
  height: 1.35rem;
}

.scenario-nav-icon .icon--clay,
.scenario-nav-icon img.clay-bi {
  width: 2.2rem;
  height: 2.2rem;
}

.scenario-icon .icon--clay,
.scenario-icon img.clay-bi {
  width: 1.85rem;
  height: 1.85rem;
}

.scenario-icon img.clay-bi {
  width: 2.1rem;
  height: 2.1rem;
}

.feature-cards .feature-card > .icon--clay,
.feature-cards .feature-card > img.clay-bi,
.feature-cards .icon--clay,
.feature-cards img.clay-bi,
.fs-2.clay-bi,
img.clay-bi.fs-2 {
  width: 3.75rem;
  height: 3.75rem;
  margin-right: 0.85rem;
  flex-shrink: 0;
  align-self: stretch;
  object-fit: contain;
}

#landing .feature-card {
  align-items: stretch;
}

#landing .feature-card > .icon--clay,
#landing .feature-card > img.clay-bi {
  width: 3.75rem;
  height: auto;
  min-height: 3.25rem;
  max-height: 100%;
  align-self: stretch;
  object-fit: contain;
  object-position: center top;
}

.tip-icon .icon--clay,
.tool-icon img.clay-bi,
.tool-icon .icon--clay {
  width: 1.35rem;
  height: 1.35rem;
  vertical-align: middle;
}

.tip-icon img.clay-bi {
  width: 2.45rem;
  height: 2.45rem;
}

.hero-icon .icon--clay,
.hero-icon img.clay-bi {
  width: 3rem;
  height: 3rem;
}

.module-wrapup-card__icon .icon--clay {
  width: 1.5rem;
  height: 1.5rem;
}

.local-privacy-banner__icon .icon--clay {
  width: 2rem;
  height: 2rem;
}

.nav-ecosystem__segment--ews.is-expanded .nav-eco-brand img.icon--clay,
.nav-ecosystem__segment--course.is-expanded .nav-eco-site-mark img.icon--clay {
  width: 2rem !important;
  height: 2rem !important;
}

.btn-with-icon .icon--clay,
.btn .icon--clay {
  width: 1.1em;
  height: 1.1em;
}

.cta-button-container .quiz-main-btn .icon--clay,
.cta-button-container .quiz-main-btn img.clay-bi,
.cta-button-container .btn .icon--clay {
  width: 1.45rem;
  height: 1.45rem;
}

.flag img.flag--clay,
.flag .flag--clay {
  width: 3.5rem;
  height: auto;
  max-height: 2.65rem;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
}

.type-brand.clay-type,
img.type-brand.clay-type {
  width: auto;
  height: 2.5rem;
  max-width: 7.5rem;
  object-fit: contain;
}