.hero-karta{position:relative;border-bottom:1px solid var(--kolor-linii);overflow:hidden}
.hero-karta__siatka{position:relative;z-index:1;display:grid;gap:var(--luz);grid-template-columns:1fr;
  align-items:center;padding-block:var(--pion)}
.hero-karta__tresc{min-width:0}
.hero-karta__tresc h2{margin-bottom:.35rem}
.hero-karta__tresc p{font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  color:var(--kolor-tekstu-wtornego);margin-bottom:1.6rem;max-width:34ch}
.hero-karta__foto{margin:0;border:1px solid var(--kolor-linii);background:var(--kolor-karty);
  padding:.5rem;box-shadow:var(--cien-komponentu);min-width:0}
.hero-karta__obraz{width:100%;aspect-ratio:800/437;object-fit:cover;
  object-position:var(--hero-object-position,center center)}
.hero-karta .przycisk{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 2rem;background:var(--kolor-akcentu);
  color:var(--kolor-tekstu-na-akcencie);text-decoration:none;border:1px solid var(--kolor-akcentu-hover);
  border-radius:var(--promien);font-family:var(--font-naglowek);font-weight:600;
  font-size:.92rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.hero-karta .przycisk:hover,.hero-karta .przycisk:focus-visible{background:var(--kolor-akcentu-hover);
  color:var(--kolor-tekstu-na-akcencie);border-color:var(--kolor-linku-hover)}
.hero-karta .przycisk:focus-visible{outline:3px solid var(--kolor-tekstu);outline-offset:2px}
@media (min-width:900px){
  .hero-karta--obraz-z-prawej .hero-karta__siatka{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(2rem,1.4rem + 3vw,4rem)}
}
@media (min-width:760px){
  .hero-karta--podklad-panel::before{content:"";position:absolute;inset:-2rem;
    background-image:linear-gradient(var(--kolor-tla),var(--kolor-tla)),var(--hero-background-image);
    background-blend-mode:soft-light;background-size:cover;background-position:var(--hero-object-position,center center);
    filter:blur(14px);opacity:.72}
  .hero-karta--podklad-panel .hero-karta__siatka{display:grid;grid-template-columns:1fr;
    padding-block:clamp(2.5rem,5vw,5rem) clamp(5rem,7vw,7rem)}
  .hero-karta--podklad-panel .hero-karta__foto{grid-area:1/1;width:min(100%,960px);justify-self:center;padding:.5rem}
  .hero-karta--podklad-panel .hero-karta__tresc{grid-area:1/1;align-self:end;justify-self:start;z-index:2;
    width:min(34rem,calc(100% - 2rem));margin:0 0 clamp(-4rem,-3vw,-2rem) clamp(1rem,4vw,4rem);
    padding:clamp(1.35rem,2.5vw,2.5rem);background:var(--kolor-karty);
    border-top:3px solid var(--kolor-akcentu);box-shadow:var(--cien-komponentu)}
}