`, który w kilku miejscach
stoi między ramką a obrazkiem), bo każde miejsce ma inną wysokość
cienia: 60 px w karuzeli, 14 px przy kafelku autora. Brak zmiennej
znaczy „bez cienia" i jest poprawnym stanem — tak stoi dziś siatka
księgarni, koszyk i półka e-booków.
Z tego samego powodu zaokrąglenie przeszło na obrazek (`--ok-promien`).
Na ramce działało tylko razem z `overflow: hidden`, a `overflow: hidden`
obcina `drop-shadow` dziecka. Ramki tracą więc `overflow: hidden`
wszędzie poza siatką księgarni, gdzie nadal trzyma w karbach
powiększenie okładki przy najechaniu.
Te reguły zastępują siedem osobnych `object-fit: contain` rozsianych
po arkuszu (decyzja 4A, 1.9). Nowych nie dopisujemy: ramka woła makro
i dostaje wszystko. */
.ok-obraz, .ok-pusta {
width: 100%; height: 100%; display: block;
border-radius: var(--ok-promien, 0);
/* `filter: none` jest poprawną wartością, a `drop-shadow(none)` nie —
dlatego cień wchodzi tu całym filtrem, a nie samą jego wartością. */
filter: var(--ok-cien, none);
}
.ok-obraz {
object-fit: contain;
/* Wyśrodkowana w poziomie, do dołu w pionie. Dół, a nie środek, bo
o to prosi zlecenie i ma w tym rację: w rzędzie kafelków okładki
o różnej wysokości stoją wtedy na jednej linii, jak książki na
półce. Wyśrodkowane pionowo wisiałyby każda na swojej wysokości
i rząd przestawał wyglądać na rząd.
Wyjątek „prawie 2:3" (`.ok-przytnij`) nadpisuje to z atrybutu
`style`, bo tam `object-position` jest punktem skupienia z panelu. */
object-position: 50% 100%;
/* Cień ma się pogłębiać przy najechaniu na kafelek tak samo płynnie,
jak robił to `box-shadow` na ramce. Przejście musi stać TUTAJ, na
`filter`: zmienna `--ok-cien` sama się nie animuje (zmienne własne
bez `@property` są nieinterpolowalne), ale wyliczony z niej filtr
już tak. Czas ten sam co `.nbook .cv`. */
transition: filter .28s;
}
/* Tytuł bez okładki w ramce, która nie ma własnej zaślepki — czyli
kafelek katalogu i półki (dorobek sprzed czasów zdjęć, B3). Księgarnia,
koszyk, ulubione i półka e-booków mają swoje `div.nocover` i tu nie
trafiają: tam szablon rozstrzyga `{% if cover %}` przed wołaniem makra.
Kolor karty zostaje właśnie TU i tylko tu. Zakaz „białej karty pod
okładką" mówi o pustym miejscu WOKÓŁ okładki; tytuł bez okładki nie ma
wokół czego zostawiać pustego miejsca, a niewidoczna dziura w rzędzie
byłaby czytana jako błąd składu, nie jako brak zdjęcia. */
.ok-pusta { background: var(--card) }
/* Jedyny wyjątek od „nigdy nie przycinamy" (pkt 4, cz. 2). Okładka
odbiegająca od 2:3 o mniej niż pięć procent — 600×880 zamiast 600×900,
czyli margines składu, a nie inny format — wchodzi w ramkę przez
przycięcie, bo cały obraz zostawiłby jej dwa paski po trzy piksele:
wygląda to jak błąd renderowania, nie jak zamierzone tło.
Klasę zakłada makro (`_okladka_macros.html`), a próg liczy serwer
(`app/covers.py::kadr`) — tutaj nie ma żadnej liczby do przestawienia.
`object-position` idzie obok, w atrybucie `style`, bo to wartość
z bazy: punkt skupienia ustawiony przy książce w panelu.
Reguła musi być JEDYNA, która mówi o `object-fit` na okładce. Przy
pierwszym podejściu nie była: po każdym miejscu z okładką został
z czasów przed częścią pierwszą własny wiersz w rodzaju
`.nbook .cv img { object-fit: contain }`. Dopóki wszędzie było
`contain`, te duplikaty niczego nie psuły — ale mają wyższą swoistość
(dwie klasy i element kontra dwie klasy), więc wyjątek przegrywał
z nimi w ciszy: w HTML-u stała klasa `ok-przytnij` i `object-position`
z panelu, a przeglądarka dalej robiła `contain`. Wyszło to dopiero na
zrzucie — porównanie „przed częścią drugą" i „po" było identyczne
co do piksela. Pięć takich wierszy (półka i katalog, karta książki,
katalog księgarni, koszyk, półki konta) zostało usuniętych; jeśli
dopisujesz nowe miejsce z okładką, nie dopisuj `object-fit` — makro
i te dwie reguły załatwiają wszystko. */
.ok-obraz.ok-przytnij { object-fit: cover }
/* Ramka dla miejsc, w których okładka nie miała własnego kontenera —
kafelek autora na stronie głównej (`.author-book`) i okładki przy
wydarzeniu (`.wyd-okladki`).
Bez `overflow: hidden` od 21.10: obcinało `drop-shadow` z obrazka
dokładnie tam, gdzie cień ma być widoczny, czyli pod dolną krawędzią
okładki. Zaokrąglenie, dla którego ono tu stało, przeszło na obrazek
(`--ok-promien`), a w tych dwóch ramkach nie leży nic, co mogłoby
z niej wystać. */
.ok-ramka { position: relative; aspect-ratio: 2/3 }
/* --- Wizualizacja 3D (poprawki 20.10, pkt 5) -------------------------
Książka jako przedmiot: PNG bez tła, w trzech miejscach, w których
okładka stoi duża i sama (karuzela, karta książki, list). Nigdy
w siatce kafelków i to jest wymóg ze zlecenia, nie oszczędność:
kafelki w rzędzie mają wyglądać na równe, a render ma inną sylwetkę
niż płaski prostokąt — jedna książka „w 3D" między pięcioma płaskimi
wygląda jak błąd składu. Pkt 3 tej samej paczki równał te kafelki
i byłoby to cofnięcie jego roboty.
Cień z `drop-shadow`, nie z `box-shadow`: idzie za kanałem alfa,
więc kładzie się pod sylwetką książki. `box-shadow` obrysowałby
prostokąt obrazka, czyli narysował ramkę wokół przezroczystego tła —
dokładnie to, czego ten obrazek ma nie mieć. */
.ok-3d {
position: relative; display: block;
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 22px 26px rgba(40, 18, 18, .34));
}
/* Ramka, która niesie render, przestaje być ramką. Od 21.10 zostało z tego
jedno: zdjęcie przekrzywienia. Trzy pozostałe rzeczy, które trzeba tu
było odkręcać — kartę pod spodem, prostokątny cień i zaokrąglenie —
ramki straciły już same, razem ze zmianą zasady okładki, bo każda z nich
była widoczna jako obcy prostokąt za książką nie tylko przy renderze 3D,
ale i przy kwadratowej książeczce dla dzieci.
Przechył zostaje po stronie wyjątku, bo w karuzeli jest zamierzony:
płaska okładka ma leżeć lekko ukosem, jak wyjęta z pudła, a render
książki stojącej w perspektywie przekrzywiony o kolejne trzy stopnie
wygląda na przewrócony.
`aspect-ratio` zostaje 2:3, choć render bywa szerszy. Celowo: ramka
trzyma wtedy dokładnie to samo miejsce co płaska okładka, więc
wstawienie i zdjęcie wizualizacji nie przestawia układu strony ani
nie rusza przyklejonej kolumny na karcie książki. Render wchodzi
w nią przez `contain`, czyli w całości. */
.hc-slide .cov a.ok-rama3d, .kb-cover-link.ok-rama3d { transform: none }
/* --- półka nowości (ZMIANA 4 + poprawka: 6 w rzędzie, mniejsze karty) --- */
.feat-wrap { background: linear-gradient(180deg, #fffdf9, #f6f1ea) }
.news-books { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px }
.nbook { display: flex; flex-direction: column }
/* Ramka kafelka półki i katalogu — najliczniejsza w silniku (półka
nowości, `/publikacje`, bibliografia autora, „Wkrótce", dwie półki
powiązanych na karcie książki).
21.10: bez tła i bez `overflow: hidden`. Pod kafelkiem leży gradient
`.feat-wrap` albo `--paper` i to on ma być widoczny wokół okładki
o innej proporcji. Cień i promień niosą zmienne, bo rysuje je
`.ok-obraz`; gdyby zostały na ramce, obrysowywałyby prostokąt 2:3
także tam, gdzie okładka go nie wypełnia. Plakietki i serduszko stoją
w tej ramce jako `position: absolute` i `overflow` ich nie dotyczy. */
.nbook .cv {
position: relative; aspect-ratio: 2/3; transition: .28s;
--ok-promien: 5px;
--ok-cien: drop-shadow(0 14px 30px rgba(40, 18, 18, .18));
}
/* Okładki w `.cv` nie ma tu już ani słowa — rozmiar, `object-fit`
i `display` niesie `.ok-obraz` (patrz wyżej). W tym pojemniku nie stoi
żaden inny obrazek: zaślepka bez okładki to `.ok-pusta` z makra. */
.nbook:hover .cv {
transform: translateY(-6px) rotate(-1deg);
--ok-cien: drop-shadow(0 24px 44px rgba(40, 18, 18, .28));
}
/* `z-index: 2` jak u sąsiadów w tej samej ramce — `.frag` ma 2,
serduszko 3. Ta jedna plakietka go nie miała i uchodziło jej to na
sucho, bo nic pozycjonowanego nie stało za nią w dokumencie. Punkt 4
to zmienił: okładka dostała `position: relative` (żeby nie zakryło
jej rozmyte tło) i zaczęła się malować nad plakietką — „NOWOŚĆ"
i „ZAPOWIEDŹ" zniknęły z kafelków katalogu i półki. Wyszło to na
zrzutach „po", przed zamknięciem punktu.
Zmiana zasady z 21.10 zdjęła z okładki `position: relative` (nie ma
już czego przebijać, bo nie ma warstwy tła), ale `z-index` zostaje
i ma zostać: obrazek niesie teraz `filter`, czyli zakłada własny
kontekst nakładania. Pozycjonowana plakietka z dodatnim `z-index`
maluje się nad nim, plakietka bez niego — nie na każdej przeglądarce
tak samo. Jedno przeoczenie na tej samej plakietce wystarczy. */
.nbook .tag2 {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--brand); color: #fff;
font-family: 'Oswald'; font-size: 10px; text-transform: uppercase;
letter-spacing: .05em; padding: 3px 9px; border-radius: 100px;
}
.nbook .tag2.z { background: var(--gold) }
.nbook .tag2.b { background: #2f6d4f }
/* „Wyczerpany" / „Na zamówienie" (B3) — wygaszony grafit. Status to
zastrzeżenie, nie wyróżnienie: ma być czytelny, ale nie ma prawa
krzyczeć głośniej od bordowej nowości obok. */
.nbook .tag2.ns { background: #585049 }
.nbook .k {
font-family: 'Oswald'; font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); margin-top: 12px;
}
/* `h4` razem z `h3`, bo w bloku „O autorze" na karcie książki ten sam
kafelek stoi o poziom niżej (nazwisko w `h2`, „Inne książki" w `h3`).
Tytuł książki ma wtedy wyglądać tak samo — zmienia się tylko miejsce
w spisie nagłówków, nie waga wizualna. */
.nbook h3, .nbook h4 {
font-family: 'Oswald'; font-weight: 500; font-size: 16px;
text-transform: uppercase; margin: 3px 0 1px;
}
.nbook .au { font-size: 12.5px; color: var(--muted); font-style: italic }
.nbook .price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; flex-wrap: wrap }
.nbook .price b { font-family: 'Oswald'; font-weight: 600; font-size: 17px; color: var(--brand) }
.nbook .price s { font-size: 12px; color: var(--muted) }
.nbook .price .okl { font-size: 10px; color: var(--muted); font-style: italic; width: 100% }
/* `margin-top: auto` dosuwa przycisk do dołu kafelka, a nie do tekstu nad
nim. W makiecie nie było to widać, bo wszystkie tytuły mieściły się
w jednym wierszu; w bazie stoi „Magdalena Samozwaniec. 91 wspomnień
o pierwszej damie polskiej satyry" na trzy wiersze i bez tego jego
przycisk zjeżdżał o 30 px niżej od sąsiadów. Działa, bo `.nbook` jest
kolumną flex (wyżej), a komórki siatki rozciągają się do wysokości
najwyższej w rzędzie. */
.nbook .buy { margin-top: auto; padding-top: 12px }
/* `.morebtn` („Więcej" → karta książki) dzieli z `.addbtn` cały kształt,
bo oba stoją w tym samym miejscu kafelka i zamieniają się miejscami
zależnie od flagi sklepu (DECYZJE poz. 90). Rozjechane wysokości
dawałyby półkę skaczącą po włączeniu sklepu. Różni je sam kolor
obwódki: zakup jest bordowy, doczytanie — grafitowe, jak `.btn-ghost`
w hero. */
.addbtn, .morebtn {
width: 100%; border: 1px solid var(--brand); color: var(--brand);
background: none; border-radius: 100px; padding: 9px 10px;
font-family: 'Oswald'; font-size: 11px; font-weight: 500;
letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
transition: .2s; display: inline-flex; align-items: center;
justify-content: center; gap: 7px;
}
.addbtn:hover { background: var(--brand); color: #fff }
.morebtn { border-color: var(--ink); color: var(--ink); text-decoration: none }
.morebtn:hover { background: var(--ink); color: #fff }
/* --- zakup: wspólne dla karuzeli, półki, katalogu i karty (A2) ------------
Formularz „dodaj do koszyka" opakowuje przycisk, bo dodanie musi być
POST-em, a nie linkiem — link do akcji zmieniającej stan dałby się
wywołać z cudzej strony i byłby pobierany przez roboty.
`display: contents` sprawia, że to opakowanie znika z układu i przycisk
trafia bezpośrednio w siatkę rodzica. Inaczej każde miejsce, w którym
przycisk dotąd był bezpośrednim dzieckiem (`.nbook .buy`, `.hero-cta`,
`.kb-fmt-buy`), musiałoby dostać własną regułę na nowy element pośredni —
cztery reguły zamiast jednej, i cztery okazje, żeby któraś się rozjechała. */
.zakup { display: contents }
/* Przedsprzedaż to też zakup, więc kształt zostaje ten sam — zmienia się
tylko kolor, na złoty: „kupisz, ale nie dziś". Osobny kolor jest
potrzebny, bo przy identycznym przycisku jedyną różnicą byłby napis,
a ten na kafelku czyta się dopiero po tytule i cenie. */
.addbtn.przedsprzedaz { border-color: var(--gold); color: #7a5c22 }
.addbtn.przedsprzedaz:hover { background: var(--gold); color: #fff }
/* W hero przycisk jest wypełniony (`.btn-primary`), więc złoto wchodzi tłem,
nie obwódką — inaczej karuzela dostałaby biały napis na białym. */
.btn.przedsprzedaz { background: var(--gold); border-color: var(--gold); color: #fff }
.btn.przedsprzedaz:hover { background: #96702f; border-color: #96702f }
/* „Zapytaj o dostępność" nie jest zakupem — nic nie ląduje w koszyku, więc
nie dostaje bordowej obwódki zarezerwowanej dla kasy. Wygląda jak
„Więcej": ta sama pigułka, grafit zamiast bordo. */
.addbtn.pytaj, .btn.pytaj {
border-color: var(--ink); color: var(--ink);
background: none; text-decoration: none;
}
.addbtn.pytaj:hover, .btn.pytaj:hover { background: var(--ink); color: #fff }
/* Data premiery NAD przyciskiem przedsprzedaży (poprawki 7, pkt 7) —
obok się nie mieści: przy 360 px „Zamów w przedsprzedaży" i „Wysyłka
po premierze: 23.10.2026" w jednym wierszu nie mieszczą się ani razem,
ani osobno. Nad, a nie pod: przycisk musi zostać OSTATNIM elementem
kafelka (`.buy`/`.buy-act` ma `margin-top: auto` i rząd w siatce
rozciąga wszystkie karty do wysokości najwyższej) — inaczej ten
dopisek, obecny tylko przy przedsprzedaży, odsuwałby przycisk od dołu
kafelka dokładnie o swoją wysokość, i w rzędzie z choć jedną
przedsprzedażą przyciski przestawały się równać z resztą.
Margines z obu stron (nie tylko `margin-top`), bo ten sam dopisek
stoi raz jako ostatnie dziecko `.buy-act` (księgarnia, ulubione — tam
liczy się odstęp od ceny nad nim), a raz jako osobny element przed
`.buy` (półka na stronie głównej — tam liczy się odstęp do przycisku
pod nim). */
.premiera-info {
margin: 7px 0; font-size: 11.5px; line-height: 1.45;
color: var(--muted);
}
.premiera-info b { color: #7a5c22; font-weight: 600 }
@media (max-width: 1180px) { .news-books { grid-template-columns: repeat(4, 1fr) } }
/* --- plakietka „fragment" na kafelkach (A5) -------------------------------
Jedna reguła dla wszystkich miejsc, w których stoi kafelek książki:
półka na stronie głównej (`.nbook .cv`), katalog księgarni
(`.card .ph`), strona autora, „Czytelnicy wybrali także" i „Wkrótce".
Wszystkie te pojemniki są już `position: relative` z `overflow: hidden`,
bo trzymają plakietkę „Nowość" — więc nowa nie potrzebuje niczego
dokładać do układu.
Siada w LEWYM DOLNYM rogu okładki, choć lewy górny wyglądałby
naturalniej. Powód: lewy górny jest zajęty przez `.tag2` / `.pin`
(„Nowość", „Zapowiedź"), a te dwie rzeczy występują razem — zapowiedź
z fragmentem to sytuacja najzwyklejsza z możliwych. W jednym rogu
jedna zasłoniłaby drugą.
Tło jest półprzezroczystą czernią, nie kolorem marki. Plakietka leży na
okładce, której koloru nie znamy z góry, a w katalogu jest 79 różnych:
bordowy napis na bordowej okładce nie istnieje. Czerń z rozmyciem
działa na każdym tle, bo sama sobie robi kontrast. */
.frag {
position: absolute; bottom: 10px; left: 10px; z-index: 2;
background: rgba(35, 26, 23, .82); color: #fff;
font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: .06em;
padding: 3px 9px; border-radius: 100px;
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* W karuzeli nie ma rogu, do którego dałoby się przykleić plakietkę:
okładka jest obrócona o -3°, ma 300 px i stoi wyśrodkowana w szerokiej
kolumnie, więc „lewy dolny róg pojemnika" wypadłby obok okładki, a nie
na niej. Dlatego w hero plakietka dosiada się do nadkreślenia.
Musi przy tym zostać DZIECKIEM `.eyebrow`, a nie kolejnym dzieckiem
`.hc-text`: kaskada wejścia slajdu rozdaje opóźnienia przez
`:nth-child`, więc nowy element w tym miejscu przesunąłby wszystkie
następne o jedno i tytuł wjeżdżałby z opóźnieniem autora. */
.eyebrow .frag { position: static; margin-left: 10px; letter-spacing: .06em }
/* --- serduszko „ulubione" (B1) --------------------------------------------
Jeden wygląd przycisku, trzy miejsca osadzenia. Przycisk opakowuje
formularz, bo odłożenie tytułu zmienia stan konta i musi być POST-em
(patrz `_ulubione_macros.html`) — opakowanie znika z układu tak samo
jak przy `.zakup`, żeby nie mnożyć reguł na element pośredni.
Serce jest obwiedzione, nie wypełnione, dopóki tytuł nie jest na
liście. Dwa stany na jednej ścieżce SVG: `fill` zmienia arkusz, a nie
drugi rysunek — dwa pliki rozjechałyby się kształtem przy pierwszej
poprawce. */
.serce-form { display: contents }
.serce {
border: none; background: none; padding: 0; cursor: pointer;
color: inherit; display: inline-flex; align-items: center; gap: 8px;
transition: transform .18s, color .18s;
}
.serce svg { fill: none; transition: fill .18s, stroke .18s }
.serce:hover { transform: scale(1.08) }
.serce.on svg { fill: var(--brand); stroke: var(--brand) }
/* W rogu okładki. Prawy GÓRNY, nie lewy: lewy górny trzyma plakietkę
„Nowość" / „Zapowiedź" (`.tag2`, `.pin`), a lewy dolny — „fragment".
Trzy rzeczy w dwóch rogach znaczyłyby, że zapowiedź z fragmentem
zasłania serduszko dokładnie tam, gdzie najczęściej się przydaje.
Tło jest półprzezroczystą czernią z rozmyciem, tak samo jak przy
`.frag` i z tego samego powodu: ikona leży na okładce, której koloru
nie znamy, a w katalogu jest ich 79. Bordowe serce na bordowej
okładce nie istnieje. */
.serce-rog {
position: absolute; top: 10px; right: 10px; z-index: 3;
width: 32px; height: 32px; border-radius: 100px;
justify-content: center; gap: 0;
background: rgba(35, 26, 23, .72); color: #fff;
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.serce-rog.on svg { fill: #fff; stroke: #fff }
.serce-rog:hover { background: rgba(35, 26, 23, .9) }
/* W wierszu przycisków karty książki — tu serce ma podpis, więc wygląda
jak trzeci przycisk, nie jak ikonka. Kształt pigułki ten sam co
`.morebtn`, żeby wiersz „Dodaj do koszyka / Przeczytaj fragment /
Dodaj do ulubionych" nie składał się z trzech różnych brył. */
.kb-ulub { margin-top: 14px }
.serce-wiersz {
border: 1px solid var(--line); border-radius: 100px;
padding: 9px 16px; color: var(--muted);
}
.serce-wiersz:hover { border-color: var(--brand); color: var(--brand); transform: none }
.serce-wiersz.on { border-color: var(--brand); color: var(--brand) }
.serce-napis {
font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: .05em; text-transform: uppercase;
}
/* W karuzeli — obok „Poznaj książkę", bo obrócona okładka slajdu nie ma
rogu, do którego dałoby się cokolwiek przykleić (patrz `.eyebrow .frag`
wyżej). Sama ikona bez podpisu: wiersz hero ma już dwa przyciski
z napisami i trzeci zrobiłby z niego spis treści. */
.serce-hero {
width: 44px; height: 44px; border-radius: 100px; justify-content: center;
gap: 0; border: 1px solid var(--line); background: var(--card);
}
.serce-hero:hover { border-color: var(--brand); color: var(--brand) }
/* Ikona z licznikiem w nagłówku. Kształtu nie ustawia — bierze go
z `.cart` (wizytówka) albo `.iconbtn` (księgarnia), bo makro dostaje
tę klasę argumentem. Zostaje samo podbarwienie przy najechaniu:
pusty obrys w pasku ikon czyta się jako „nieaktywne", a ta ikona
prowadzi na listę zawsze, także gdy lista jest pusta. */
.ulub-ikona svg { fill: none; transition: fill .18s }
.ulub-ikona:hover svg { fill: rgba(123, 30, 42, .14) }
/* --- aktualności --- */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.act {
background: var(--card); border: 1px solid var(--line);
border-radius: 14px; overflow: hidden; transition: .25s;
}
.act:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(40, 18, 18, .12) }
.act .ph { aspect-ratio: 16/10; overflow: hidden; position: relative }
.act .ph img { width: 100%; height: 100%; object-fit: cover }
/* Poprawki 3 (A12): zdjęcie, którego proporcje mocno odbiegają od
kafelka (plakat, grafika z tekstem na całą wysokość) — pokazujemy je
w całości, a wolne miejsce wypełnia rozmyte tło z tego samego obrazu,
zamiast obcinać `object-fit: cover`. `.ph-tlo` niesie tło (osadzone
przez szablon jako `style="background-image: …"`, bo CSS nie umie
przepisać `src` z `![]()
` na tło bez duplikowania adresu w arkuszu),
`img` idzie na wierch z `object-fit: contain`. */
.act .ph.ph-cale .ph-tlo {
position: absolute; inset: 0; background-size: cover;
background-position: center; filter: blur(22px) brightness(.92);
transform: scale(1.15);
}
.act .ph.ph-cale img { object-fit: contain; position: relative }
.act .ab { padding: 22px }
.act .date {
font-family: 'Oswald'; font-size: 11.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--brand);
}
.act h3 { font-family: 'Oswald'; font-weight: 500; font-size: 21px; text-transform: uppercase; margin: 8px 0 }
.act p { font-size: 14.5px; color: var(--muted) }
/* Kafelek z bazy jest linkiem, kafelek z makiety zostaje `