/*
 * Zivaro skill-detail page contract.
 *
 * Structural invariants shared by all skill detail pages. Page-specific styles
 * may change colors, spacing and decoration, but not these alignment rules.
 */

.zv-skill-detail :where(.zv-skill-layout, .zv-skill-grid) > * {
  min-width: 0;
}

.zv-skill-detail :where(.zv-skill-card, .zv-skill-copy, .zv-skill-heading) {
  min-width: 0;
}

.zv-skill-detail :where(.zv-skill-icon) {
  display: grid;
  place-items: center;
  margin-inline: auto;
  line-height: 1;
}

.zv-skill-detail :where(img.zv-skill-icon, .zv-skill-icon > img) {
  display: block;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.zv-skill-detail .zv-skill-grid > article > img {
  display: block;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.zv-skill-detail :where(.zv-skill-picture) {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
}

.zv-skill-detail :where(.zv-skill-picture picture, .zv-skill-picture img) {
  display: block;
  width: 100%;
  max-width: 100%;
}

.zv-skill-detail :where(.zv-skill-step) {
  position: relative;
  min-width: 0;
  text-align: center;
}

.zv-skill-detail :where(.zv-skill-step-number) {
  display: grid;
  place-items: center;
}

@media (max-width: 52rem) {
  .zv-skill-detail :where(.zv-skill-center-mobile, .zv-skill-card) {
    text-align: center;
  }

  .zv-skill-detail :where(.zv-skill-center-mobile, .zv-skill-card) > :where(h1, h2, h3, p) {
    margin-inline: auto;
  }

  .zv-skill-detail :where(.zv-skill-icon) {
    margin-inline: auto;
  }
}