/* ========================================================================== Sekcje strony glownej. Zero wartosci na sztywno, wszystko z tokens.css. ========================================================================== */ /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; /* D56, 01.09.2026: wysokosc sekcji wynika z portretu, nie z dlugosci tekstu. Portret jest absolutny, wiec sam jej nie napedza, dlatego liczymy jego wysokosc z szerokosci i proporcji pliku (1913/3144 = 0,6085, patrz D47) i doliczamy pas naglowka plus rowny oddech gora i dol. Dzieki temu odstep od dolu kapsuly naglowka do gory portretu jest taki sam jak od dolu portretu do konca sekcji, przy kazdej szerokosci portretu ustawionej suwakiem (--portret-w). Tresc jest wysrodkowana w pionie w tym samym obszarze, prosba Jakuba z 01.09. */ /* 02.09.2026 (D88): 513 px, zmierzone wprost z kadru Karola (materialy/kadry/naglowek-hero.png): lisc zajmuje tam x 887-1399, y 163-900 przy oknie 1440. Wczesniej stalo 380 (D79) i to ono robilo wrazenie waskiego ksztaltu, nie proporcja. */ /* 513 px to wartosc docelowa, ale ponizej okolo 1350 px okna kolumna tekstu (640 px) i portret przestaja sie miescic obok siebie i lisc wchodzi pod naglowek H1. Dlatego szerokosc jest ograniczona tym, co realnie zostaje po tekscie: okno minus oba marginesy, minus kolumna, minus 48 px przerwy. Dolna granica pilnuje, zeby przy waskim desktopie portret nie zszedl do paska. 240 px, nie 300: przy 300 w oknie 1000 px zabraklo 15 px i lisc wchodzil pod H1 (zmierzone). */ --portret-w: max(240px, min(488px, calc(100vw - var(--rama-margin) - var(--container-margin) - var(--hero-tresc-w) - 48px))); --portret-x: 0px; /* 02.09.2026 (D79): zero zamiast -99. Ujemna wartosc z D58 celowo wsuwala portret pod szklo kapsuly, Jakub odwrocil to ustalenie: zdjecie ma nie nachodzic ani na naglowek, ani na dolna krawedz sekcji. Przy zerze gorny offset portretu jest dokladnie taki sam jak padding tresci, wiec swiatlo nad portretem rowna sie oddechowi sekcji. */ --portret-y: 0px; /* 02.09.2026 (D81): proporcja jako zmienna, nie liczba w dwoch miejscach. Uzywaja jej aspect-ratio portretu I rachunek wysokosci sekcji, wiec rozjazd miedzy nimi konczyl sie tym, ze portret przestawal miescic sie w swietle policzonym przez min-block-size. Jedna wartosc, dwa uzycia. */ /* 02.09.2026 (D88): 0,95 zamiast 0,695. Przy czystej soczewce (D87) grubosc liscia daje wylacznie proporcja pudelka, wiec 0,695 z kadru Karola czytalo sie jako waski, rozciagniety lisc. Wysokosc zostaje ta sama co przy 380 na 514 (rozmiar, ktory Jakub zaakceptowal), rosnie tylko szerokosc, wiec ksztalt robi sie pelniejszy, a sekcja nie rosnie. Zestawienie czterech grubosci przy stalej wysokosci rozstrzygnelo wybor. */ /* D171, 03.09.2026: wartosc dobrana przez Jakuba w konfiguratorze, zakres podstawowy (wszystkie szerokosci). Zapisana w pliku wlasciciela, nie w konfigurator.css (D168). Zakresy wezsze maja wlasne wartosci i zostaja nietkniete, bo stoja nizej w plikach albo w zapytaniach medialnych. */ --portret-prop: 0.96; /* Szerokosc kolumny tekstu, uzywana takze w rachunku szerokosci portretu: to ona decyduje, ile miejsca zostaje obok. Ponizej okolo 1230 px okna kolumna zwezala sie za pozno i lisc wchodzil pod naglowek. */ /* D160, 03.09.2026: 640px/52vw -> 796px/56vw. Kolumna rosnie dokladnie o tyle, ile luzu bylo miedzy nia a portretem, wiec portret zostaje na swoich 488px i kompozycja hero sie nie zmienia (1440 - 36 ramy - 72 kontenera - 48 przerwy - 796 = 488). Zapas przy 1440: wiersz "w Ostrowi Mazowieckiej" potrzebuje 792px przy foncie 87px. */ --hero-tresc-w: min(796px, 56vw); --portret-wys: calc(var(--portret-w) / var(--portret-prop)); --hero-oddech: var(--space-9); display: grid; align-content: center; /* odstep liczony od DOLU KAPSULY, nie od krawedzi okna: kapsula ma jeszcze wlasne odsuniecie --space-4 od gory, wiec bez tego skladnika gora wychodzila o te 16px ciasniej niz dol (zmierzone 48 wobec 64). */ padding-block-start: calc(var(--hero-oddech) + var(--space-4) + var(--header-rest-h, 0px)); padding-block-end: var(--hero-oddech); /* 02.09.2026 (D79), UCHYLA D57: portret wraca do rachunku wysokosci sekcji. D57 zdejmowalo go stad swiadomie, zeby sekcja nie urosla do 924 px, i akceptowalo przyciecie dolu portretu przez overflow. Jakub odwrocil to ustalenie: zdjecie ma miescic sie w calosci. Wysokosc liczona z gory: pas naglowka, oddech, wlasne odsuniecie kapsuly, portret, oddech. Przy 380 px szerokosci daje to 885 px zamiast 934, ktore odrzucil. Swiatlo nad portretem i pod nim wychodzi rowne z samej konstrukcji. */ min-block-size: calc( var(--header-rest-h, 0px) + var(--hero-oddech) + var(--space-4) + var(--portret-wys) + var(--hero-oddech) ); } /* D39, 31.08.2026: naglowek w normalnym przeplywie (D30/D38, sticky) zajmuje wlasna wysokosc, ale nie ma wlasnego tla (tylko szklana kapsula), wiec przed przewinieciem przez ten pasek widac krem strony zamiast ciemnego hero. Ciemne tlo ma siegac do y=0 zawsze. Naprawa: hero podciaga sie pod naglowek ujemnym marginesem, a tresc (.hero__inner) zostaje na miejscu, bo dokladnie ten sam odstep dochodzi do jej wlasnego padding-block-start (patrz algebra w decyzje.md D39, suma marginesu i paddingu znosi sie niezaleznie od stanu scrolla). D42, 01.09.2026, dwie poprawki naraz (patrz decyzje.md D42): 1) --header-rest-h przestal byc mierzony w JS PO pierwszym malowaniu (FOUC), teraz to stala wartosc policzona w czystym CSS z tokenow (tokens.css, --kapsula-h i pochodne). 2) Margines/padding tutaj znosily sie tylko ALGEBRAICZNIE, wobec zalozenia ze --header-rest-h = rzeczywista wysokosc .site-header. To zalozenie bylo falszywe na scrollu: .site-header sam kurczyl sie o ok. 38px (desktop) przy .is-scrolled (padding i kapsula mniejsze), wiec hero i tak sie przesuwalo, mimo stalej wartosci zmiennej. Prawdziwa naprawa jest w css/header.css: .site-header dostal min-height: var(--header-rest-h), wiec jego WLASNA wysokosc w dokumencie juz nigdy sie nie zmienia, kompresja zostaje czysto wizualna wewnatrz tego pudelka. Bez tej poprawki w header.css hero nadal by skakalo, niezaleznie od tego, jak liczony jest --header-rest-h. */ .hero.on-dark { margin-block-start: calc(-1 * var(--header-rest-h, 0px)); /* Audyt 31.08.2026: po D39 sekcja header+hero mierzyla 881px na 1440 wobec 977px z makiety (-96px). D39 nie zmienil tej liczby matematycznie (margines ujemny i padding-start dodatkowy sie znosza), deficyt istnial juz przed D39 przez wyzszy naglowek "Klinika" (kapsula na szkle) wobec starszego wariantu, ktory dawal 967px. Rytm pionowy hero (var(--space-9) samo w sobie) nie doliczyl tej roznicy nigdy. Zmierzone 96px odpowiada dokladnie var(--space-11), stad doliczenie go do dolnego odstepu, bez ruszania gornej kompensacji D39 (ciemne tlo nadal siega y=0 na scroll=0). */ } .hero__inner { position: relative; z-index: 2; max-width: var(--hero-tresc-w); } .hero__title { margin-bottom: var(--space-3); } .hero__lead { max-width: 520px; margin-bottom: var(--space-7); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); } /* Portret siedzi w kole, ktore wychodzi poza prawa krawedz okna. Ksztalt z makiety to nie lisc, tylko okrag o promieniu 441 px ze srodkiem 112 px na lewo od krawedzi okna, przyciety ta krawedzia. Zmierzone 24.08. */ .hero__portrait { position: absolute; /* Pozycja ustalona przez Jakuba 26.08.2026 na 1035 px od lewej. ZAMIERZONY BLEED: ksztalt konczy sie na 1535, wiec ponizej tej szerokosci okna wychodzi za prawa krawedz i jest przycinany, na 1440 o 95 px. To NIE jest usterka i nie wolno tego "naprawiac". Kontrola przepelnienia poziomego zglosi ten element na waskich ekranach i ma go zignorowac. */ /* 166px liczone od gory .hero mierzyl model ze absolute-header (hero box zaczynal sie na y=0 strony). Naglowek jest teraz w normalnym przeplywie (D30), hero startuje nizej o jego wysokosc, wiec odstep skorygowany na var(--space-9) zeby portret zostal w tym samym miejscu wzgledem okna. Do potwierdzenia na zrzucie, nie liczba do trafienia co do piksela (D32). D39, 31.08.2026: .hero (rodzic pozycjonujacy) podciagnal sie o --header-rest-h w gore, wiec dopisane tu samo --header-rest-h zeby portret zostal absolutnie w tym samym miejscu co przed poprawka. */ inset-block-start: calc(var(--hero-oddech) + var(--space-4) + var(--header-rest-h, 0px) + var(--portret-y, 0px)); /* 01.09.2026 (D48): przesuniete z 1035px na 915px, drugie ustalenie Jakuba tego samego dnia. D45 przycielo szerokosc do krawedzi okna (prawa krawedz 1440), ale Jakub chcial ciasniejszego dopasowania: prawa krawedz portretu ma konczyc sie tam, gdzie realnie konczy sie kapsula naglowka (.site-header__kapsula, prawa krawedz 1320px), nie na krawedzi okna. Szerokosc (405px) zostaje bez zmian, to przesuniecie w poziomie, nie przycinanie: 1320-405=915. */ /* 01.09.2026 (D53): przypiete do KONTENERA, nie do krawedzi okna. Poprzednio staly offset 915px liczyl sie od lewej krawedzi .hero, czyli od krawedzi okna. Kontener tresci jest wysrodkowany i przy szerszym oknie odjezdza w prawo, a portret zostawal w miejscu, wiec relatywnie wjezdzal w lewo, na naglowek (zgloszenie Jakuba, dwa zrzuty 1939 i 2924). Teraz prawa krawedz portretu trzyma sie prawej krawedzi kontenera, czyli tej samej linii co prawa krawedz kapsuly naglowka. To jest ta sama intencja co D48, tylko wyrazona niezaleznie od szerokosci okna: na 1440 wychodzi dokladnie 915px od lewej, jak bylo. */ /* 02.09.2026 (D88): kotwica przeniesiona z linii kontenera sekcji na linie kapsuly naglowka (--rama-margin). W kadrze Karola portret konczy sie na 1399 px przy oknie 1440, czyli dokladnie tam gdzie kapsula. Poprzednie oparcie o --container-margin trzymalo linie tylko przy jednej szerokosci: przy 1920 rozjezdzalo sie o 12 px, bo obie zmienne rosna w innym tempie. */ inset-inline-end: calc(var(--rama-margin) - var(--portret-x, 0px)); inset-inline-start: auto; z-index: 1; /* D55, 01.09.2026: 405px zmniejszone do 314px, zeby dol portretu spotykal sie z dolem kolumny tekstu (przyciski koncza sie na 688px przy hero 848px). Po zdjeciu paska meta (D54) lewa kolumna konczyla sie 150px wyzej niz portret i kompozycja byla przechylona na prawo. Skalowanie jest proporcjonalne, wiec ksztalt liscia sie nie znieksztalca (pulapka 11). */ width: var(--portret-w); /* 01.09.2026 (D47): aspect-ratio przeliczony z bbox_px prawdziwego zdjecia w ksztalty.json (1913x3144, proporcja 0.6085), zastepuje stary 600/752 (0.7979) wyciagniety ze starego placeholdera. Ta sama zmiana, ktora naprawia "maska wyglada na mala" (Jakub, 01.09): przy zlej proporcji 405px szerokosci dawalo ~508px wysokosci, przy poprawnej daje ~665px, bliskie oryginalnej wysokosci z makiety (zmierzone tam ok. 660-700px). */ /* Proporcja z tokenu sekcji, zeby wysokosc portretu i wysokosc sekcji liczyly sie z tej samej liczby. 0,68 ustawione suwakiem 02.09.2026 (D81), wczesniej 0,6 (D69), a przed tym 1913/3144 z alfy starego pliku. */ aspect-ratio: var(--portret-prop); /* KSZTALT, historia: 26.08.2026 (D27) owal zastapiony clip-path "lisc-hero" wyciagnietym ze STAREGO placeholdera. 31.08.2026 (D40) przyszedl prawdziwy plik od Karola (petal-v2), juz PRE-WYCIETY jako alfa-PNG. 01.09.2026 (D46) clip-path usuniety na desktopie, bo stary polygon (proporcja 0.7979) obcinal prawdziwe zdjecie do wezszego ksztaltu niz jego wlasna alfa. 01.09.2026 (D47), TA SAMA SESJA, decyzja odwrocona: Jakub chce mozliwosc automatycznej podmiany zdjecia w przyszlosci (przez ACF, bez Photoshopa za kazdym razem), a to wymaga clip-path po stronie kodu, nie polegania na tym, ze KAZDE nastepne zdjecie przyjdzie juz wyciete. Zamiast usuwac clip-path, PRZELICZONY na nowo z prawdziwej alfy tego zdjecia (wiki/narzedzia/makieta-toolkit/wyciagnij_ksztalt.py, patrz ksztalty.json "lisc-hero"), wiec teraz oba kontury (alfa i clip-path) faktycznie sie pokrywaja, i clip-path wraca. Przy kolejnej podmianie zdjecia w tym miejscu: przeliczyc ksztalt tym samym skryptem z nowego pliku, wkleic nowa sciezke tu i do (home.html, oferta.html, header.php motywu), inaczej maska zostanie stara. */ /* 02.09.2026 (D67): clip-path zdjety, ksztalt daje wspolny token liscia. Zdjecie w bazie jest teraz zwyklym prostokatem (portret-hero.jpg), wiec klientka podmienia je w kokpicie i lisc zostaje na miejscu. Lisc rozciaga sie do pudelka, wiec przy proporcji 0,609 jest tu smuklejszy niz w ofercie. Rysunek ten sam, proporcja miejsca wlasna. */ /* 02.09.2026 (D89): 67 procent w poziomie i 56 w pionie, ustawione suwakami przez Jakuba. Swiadomy powrot od czystej soczewki z D87: przy wartosciach ponizej stu luk konczy sie przed rogiem, wiec na krawedzi pudelka zostaje prosty odcinek, tutaj 33 procent poziomej i 44 procent pionowej. Czubki sa przez to lagodniejsze, a ksztalt blizszy platkowi niz ostrej soczewce. */ border-radius: 67% 0 67% 0 / 56% 0 56% 0; overflow: hidden; pointer-events: none; background: var(--surface-dark); } .hero__portrait picture { display: block; width: 100%; height: 100%; } .hero__portrait img { width: 100%; height: 100%; /* 01.09.2026 (D47): cover, nie contain. Zdjecie dzisiejsze ma juz alfe dopasowana do tego ksztaltu, wiec roznica jest niewidoczna, ale cover jest tym, co sprawia ze PRZYSZLE zwykle prostokatne zdjecie (bez alfy, wgrane przez klientke w ACF) automatycznie wypelni cala maske zamiast zostawic puste tlo w rogach liscia (co robiloby contain). To jest mechanizm "podmiana zdjec automatyczna" z pytania Jakuba. */ object-fit: cover; /* 02.09.2026 (D82): kadr i zblizenie dobrane suwakami przez Jakuba, ta sama droga co na telefonie. Do tej daty desktop nie mial zadnego zblizenia, wiec postac zajmowala mniej wiecej polowe liscia, a reszta byla tlem studia. Przy 1,48 wypelnia kadr tak samo jak na telefonie. Wczesniejsze wartosci: 5% 50% wyliczone (D67), potem 12% 56% dobrane recznie (D69). Plik zrodlowy to kwadrat 1600x1600, postac stoi w lewej polowie, a przy prawej krawedzi jest jasniejszy pas tla, ktory kadr trzyma poza polem. */ object-position: 21% 20%; transform: scale(1.53) translate(16.5%, 7.5%); transform-origin: 50% 50%; } /* ornament roslinny przy lewej krawedzi */ .hero__ornament { position: absolute; /* D55, 01.09.2026: ornament byl kotwiczony do GORY sekcji stala wartoscia (455px + kompensacja naglowka) i przy wysokosci 551px wychodzil ponizej hero, ktore ma overflow:hidden, wiec 52 procent rysunku bylo scinane plasko na granicy sekcji. Teraz kotwica idzie do DOLU, a wysokosc jest ograniczona miejscem, ktore realnie zostaje pod naglowkiem, wiec rysunek miesci sie w calosci przy kazdej wysokosci hero. Szerokosc wynika z proporcji pliku, nie jest podawana osobno. */ inset-block-start: auto; inset-block-end: var(--space-8); /* D62: ornament wychodzi teraz czesciowo poza lewa krawedz okna, zamiast stac 24px od niej. Przy tresci na 95% nagłowek zaczyna sie na 36px, wiec rysunek o szerokosci ponad 100px nachodzil na litery. Sekcja ma overflow:hidden, wiec wystajaca czesc jest przycinana krawedzia okna. */ inset-inline-start: calc(var(--container-margin) - 122px); z-index: 0; block-size: min(488px, calc(100% - var(--header-rest-h, 0px) - var(--space-9) - var(--space-8))); inline-size: auto; opacity: 0.9; pointer-events: none; } .hero__ornament img { block-size: 100%; inline-size: auto; display: block; } /* --- Hero, telefon -------------------------------------------------------- */ @media (max-width: 900px) { .hero { padding-block: 0 var(--space-9); } /* D39: na telefonie punkt startowy paddingu jest 0 (nie var(--space-9)), wiec kompensacja to sam --header-rest-h, ta sama zmienna, teraz mierzona na naglowku w ukladzie mobilnym (druga sciezka CTA dolicza wysokosc). */ .hero.on-dark { margin-block-start: calc(-1 * var(--header-rest-h, 0px)); padding-block-start: var(--header-rest-h, 0px); } .hero__inner { max-width: none; } .hero__portrait { position: static; width: auto; height: auto; /* Proporcja poprawiona 26.08.2026: 350/360 (prawie kwadrat) rozciagala liscia z D27/D28 do plaskiego, znieksztalconego ksztaltu, bo clip-path: url(#ksztalt-lisc-hero) skaluje sie do pudelka elementu (objectBoundingBox). Zmierzone pikselowo z FULL-PAGE-mobile-390px.png, bbox liscia x 46-348, y 172-560, czyli 302 na 388, zgodne z proporcja 0.7979 zapisana w materialy/ksztalty/ksztalty.json dla lisc-hero. */ /* 14.09.2026, ta sama sesja co korekta ksztaltu wyzej: Jakub chce wysokosc maski realnie jak w karcie "Twarz" (.oferta__karta:nth-child(1) .oferta__zdjecie na telefonie ma aspect-ratio 1.62), nie tylko sam ksztalt rogow. 1,62 przepisane z tamtej reguly zamiast dawnych 0,94 (ta sama proporcja co desktop hero, D89), wiec portret jest teraz wyraznie nizszy/szerszy niz przed ta zmiana. */ aspect-ratio: 1.62; /* 14.09.2026, zgloszenie Jakuba ze zrzutu: maska portretu hero na telefonie ma wygladac jak maska karty "Twarz" w sekcji Oferta (.oferta__karta:nth-child(1) .oferta__zdjecie w sekcja-oferta.css), nie jak dotychczasowy lisc/platek (92%/69%, zaokraglone rogi gora-lewo i dol-prawo). Nowa wartosc zaokragla PRZECIWLEGLA pare rogow (gora-prawo i dol-lewo). KOREKTA, ta sama data, druga runda: pierwsza probka (0% 100% / 0% 65%) byla przepisana z reguly DESKTOPOWEJ karty (sekcja-oferta.css linia 82, poza @media), nie z jej mobilnego zapytania. Promien poziomy 100% zjada CALA szerokosc gornej/dolnej krawedzi, wiec ksztalt to dalej pelny lisc/platek bez plaskiego odcinka, tyle ze odwrocony -- dokladnie to, co Jakub zglosil jako wciaz zle. Karta na telefonie (ta sama sekcja, @media max-width:900px, linia ~176) ma WLASNA, plytsza wartosc: 0% 32% 0% 32% / 0% 59% 0% 59%. Maly promien poziomy (32%) zostawia 68% kazdej poziomej krawedzi plaskie, pion (59%) daje zaokraglenie skupione przy samym rogu -- to jest ksztalt "plasko z zaokragleniami po bokach", ktorego Jakub chcial. Przepisane teraz 1:1 z TEJ wlasnie (mobilnej) reguly, nie z desktopowej. Desktop hero (poza tym zapytaniem) zostaje przy dawnym ksztalcie, Jakub prosil tylko o mobile. */ border-radius: 0% 32% 0% 32% / 0% 59% 0% 59%; /* 02.09.2026: samo --gutter-mobile stawialo zdjecie 20px szerzej z kazdej strony niz tresc pozostalych sekcji, bo portret stoi poza .container. Linia tresci to margines kontenera, a ponizej 600px dochodzi jeszcze wewnetrzny padding kontenera (dolozony w regule ponizej). */ margin-inline: var(--container-margin); /* 02.09.2026 (D78): portret zaczynal sie 8 px NAD dolna krawedzia kapsuly, czyli wchodzil pod naglowek. Widac to bylo szczegolnie po prawej, bo ksztalt ma tam kat prosty (zaokraglone sa rogi gora-lewo i dol-prawo), wiec pelny kadr dochodzil do samego burgera. Odstep liczy sie od dolu kapsuly: 32 px daje 24 px realnego swiatla. */ margin-block-start: var(--space-6); margin-block-end: var(--space-8); inset: auto; /* 02.09.2026 (D67): clip-path zdjety takze tutaj. Ksztalt z reguly bazowej (border-radius) dziala na kazdej szerokosci, wiec telefon nie potrzebuje wlasnego kontury. */ clip-path: none; } /* object-fit:cover, nie contain (dziedziczony z bazowej reguly desktopu): na telefonie nadal serwuje stary prostokatny plik portret-hero-mobile.jpg (bez alfa-przezroczystosci, poza zakresem tej rundy), contain pokazywalby cala klatke zdjecia wraz z ciemnym tlem studia w rogu, ktore cover wczesniej przycinal. Znalezione 31.08.2026 przy podmianie zdjecia desktopowego na nowy plik z alfa. */ /* 02.09.2026 (D67): kadr przesuniety do lewej krawedzi zrodla. Telefon dostaje ten sam kwadratowy plik co desktop (jdb-hero-portret-900), a jego prawy skraj to jasniejszy pas tla studia. Przy proporcji 0,778 cover pokazuje 700 z 900 pikseli, wiec 0 procent zostawia pas praktycznie calkowicie poza kadrem. */ /* 02.09.2026 (D76): zblizenie kadru do tego, co ma makieta mobilna Karola (materialy/kadry-mobile/hero-mobile.png). Zmierzone tam: postac zajmuje 61,9 procent szerokosci liscia i 80,4 procent wysokosci, u nas przed zmiana bylo 37,1 i 48,0, czyli brakowalo mnoznika okolo 1,67. Telefon serwuje kwadratowy plik 900x900 z calego kadru studia, a Karol uzyl ciasniejszego wyciecia z tej samej sesji, stad roznica. Powiekszenie idzie transformem, nie nowym plikiem, zeby podmiana zdjecia w kokpicie dalej dzialala. Kontener ma overflow: hidden, wiec nadmiar jest przycinany ksztaltem liscia. */ /* 02.09.2026 (D77): komplet dobrany suwakami przez Jakuba w konfiguratorze, zastepuje punkt wyjscia 1,3 z D76. */ .hero__portrait img { object-fit: cover; object-position: 21% 20%; transform: scale(1.53) translate(16.5%, 9%); transform-origin: 50% 50%; } .hero__ornament { display: none; } .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); } .hero__lead { margin-block-end: var(--space-4); } .hero__lead { max-width: none; } } /* Ponizej 600px .container dostaje wlasny padding-inline (tokens.css), wiec portret hero, ktory stoi poza kontenerem, musi dolozyc te sama wartosc, inaczej stoi szerzej niz tresc kazdej innej sekcji. */ @media (max-width: 600px) { .hero__portrait { margin-inline: calc(var(--container-margin) + var(--gutter-mobile)); } }