/* Static pencil studies share the hero's canvas without adding a layout column. */
.api-technical-art,
.pricing-technical-art {
  display: none !important;
}

.api-module-hero:has([data-pencil-art]),
.public-pricing-page .pricing-technical-content:has([data-pencil-art]) {
  position: relative;
  isolation: isolate;
  display: block;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding-right: 0;
}

.api-module-hero:has([data-pencil-art])::before,
.public-pricing-page .pricing-technical-content:has([data-pencil-art])::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -4rem -4.5rem -4rem 34%;
  background-image: var(--pencil-image);
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: .36;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to right, transparent 3%, #000 52%, #000 90%, transparent 100%);
}

.public-pricing-page .pricing-technical-content:has([data-pencil-art]) {
  max-width: none;
}

.api-module-hero:has([data-pencil-art]) .api-module-hero-copy,
.pricing-technical-content:has([data-pencil-art]) .pricing-hero-copy {
  position: relative;
  max-width: 44rem;
}

.api-module-hero:has([data-pencil-art]) .api-module-hero-copy > p {
  margin-inline: 0;
}

:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="firmy"]) { --pencil-image: url('/assets/api-hero/pencil-v1/firmy.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="adresy"]) { --pencil-image: url('/assets/api-hero/pencil-v1/adresy.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="banky"]) { --pencil-image: url('/assets/api-hero/pencil-v1/banky.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="vies"]) { --pencil-image: url('/assets/api-hero/pencil-v1/vies.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="kurzy"]) { --pencil-image: url('/assets/api-hero/pencil-v1/kurzy.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="krajiny"]) { --pencil-image: url('/assets/api-hero/pencil-v1/krajiny.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="sviatky"]) { --pencil-image: url('/assets/api-hero/pencil-v1/sviatky.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="pocasie"]) { --pencil-image: url('/assets/api-hero/pencil-v1/pocasie.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="prepojenia"]) { --pencil-image: url('/assets/api-hero/pencil-v1/prepojenia.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="cennik"]) { --pencil-image: url('/assets/api-hero/pencil-v1/cennik.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="integracia"]) { --pencil-image: url('/assets/api-hero/pencil-v1/integracia-v2.webp'); }
:is(.api-module-hero, .pricing-technical-content):has([data-pencil-art="download"]) { --pencil-image: url('/assets/api-hero/pencil-v1/download.webp'); }

.api-module-hero:has([data-pencil-art="prepojenia"])::before {
  inset: -1rem 0 -1rem 48%;
  opacity: .25;
}

@media (max-width: 63.999rem) {
  .api-module-hero:has([data-pencil-art])::before,
  .public-pricing-page .pricing-technical-content:has([data-pencil-art])::before {
    inset: -2rem -5rem -2rem 30%;
    opacity: .18;
    mask-image: linear-gradient(to right, transparent, #000 75%);
  }
}

@media (max-width: 39.999rem) {
  .api-module-hero:has([data-pencil-art])::before,
  .public-pricing-page .pricing-technical-content:has([data-pencil-art])::before {
    inset: -1rem -6rem -1rem 8%;
    background-size: auto 100%;
    opacity: .10;
  }
}