/* R74: six thematic full-canvas paintings behind the existing summaries. */
.home-page .skill[data-skill-art] {
  --skill-art-image: url("assets/generated/skills-r74/classical-market.webp");
  --skill-art-opacity: .10;
}

.home-page .skill[data-skill-art="growth"] {
  --skill-art-image: url("assets/generated/skills-r74/growth.webp");
}

.home-page .skill[data-skill-art="analytics"] {
  --skill-art-image: url("assets/generated/skills-r74/analytics.webp");
}

.home-page .skill[data-skill-art="content"] {
  --skill-art-image: url("assets/generated/skills-r74/content.webp");
}

.home-page .skill[data-skill-art="product"] {
  --skill-art-image: url("assets/generated/skills-r74/product.webp");
}

.home-page .skill[data-skill-art="team"] {
  --skill-art-image: url("assets/generated/skills-r74/team.webp");
}

.home-page .skill.skill-ai[data-skill-art] {
  --skill-art-opacity: .07;
}

.home-page .skill[data-skill-art] > summary {
  position: relative;
  isolation: isolate;
}

.home-page .skill[data-skill-art] > summary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image: var(--skill-art-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--skill-art-opacity);
  pointer-events: none;
}

.home-page .skill[data-skill-art] > .skill-body {
  padding-top: var(--space-5);
}

@media (max-width: 900px) {
  .home-page .skill[data-skill-art] {
    --skill-art-opacity: .09;
  }

  .home-page .skill.skill-ai[data-skill-art] {
    --skill-art-opacity: .06;
  }
}