/* Soft clay profession artwork; role selection continues through data-role. */
.categories#professions {
  scroll-margin-top: 96px;
}

.categories .profession-bar {
  padding-top: 5px;
  scroll-snap-type: x proximity;
}

.categories .profession-chip {
  gap: 9px;
  scroll-snap-align: start;
}

.categories .category-object,
body.frontdoor-preview .categories .category-object {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: none;
  border-radius: 0;
  mix-blend-mode: normal;
}

.profession-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.45;
}

.profession-label strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}

.profession-label > span {
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 680px) {
  .categories .profession-chip {
    flex: 0 0 104px;
    min-width: 104px;
    gap: 7px;
  }

  .categories .category-object,
  body.frontdoor-preview .categories .category-object {
    width: 76px;
    height: 76px;
  }

  .profession-label strong { font-size: 13px; }
  .profession-label > span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .categories .category-object { transition: none; }
  .categories .profession-chip:hover .category-object { transform: none; }
}