/* Osiedle Panorama — serwis newsowy */

:root{
  --paper:#fff; --paper-2:#f6f6f8; --paper-3:#fafafb;
  --ink:#111317; --ink-soft:#4a4f57; --ink-faint:#8b9098;
  --line:#e3e5e9; --line-soft:#eef0f3;
  --akcent:#111317; --akcent-jasny:#ffffff;
  --max:1160px; --art:720px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:var(--sans);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem; line-height:1.55; letter-spacing:-.01em; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.16}

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px}

/* ───────────── nagłówek serwisu ───────────── */
.top{position:relative; background:var(--paper); line-height:0}
.top__art{width:100%; height:clamp(200px,30vw,360px); object-fit:cover; object-position:center bottom}
.top::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  height:clamp(70px,14vw,150px);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.8) 78%,var(--paper) 100%);
}
/* rozjaśnienie pod tekstem — jak w pierwotnej wersji strony */
.top__in{
  position:absolute; inset:0; z-index:1; line-height:1.3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; text-align:center; padding:.4rem 1rem;
  background:radial-gradient(ellipse 85% 70% at 50% 45%, rgba(255,255,255,.9), rgba(255,255,255,.4) 60%, rgba(255,255,255,0) 85%);
}
.top__nazwa{
  font-weight:640; letter-spacing:-.035em; color:var(--ink); line-height:1;
  font-size:clamp(1.2rem,3vw,1.7rem); text-shadow:0 1px 12px rgba(255,255,255,.95);
}
.top__nazwa--duza{font-size:clamp(2.4rem,8vw,5rem); letter-spacing:-.045em}
.top__pod{
  margin:0; color:var(--ink); font-size:clamp(1rem,2.2vw,1.25rem);
  text-shadow:0 0 14px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.8), 0 1px 2px rgba(255,255,255,.9);
}
.top__cta{
  margin:.35rem 0 0; font-size:clamp(.85rem,1.7vw,.98rem); color:var(--ink-soft);
  background:rgba(255,255,255,.78); border:1px solid var(--line-soft); border-radius:999px;
  padding:.5rem 1.1rem; box-shadow:0 1px 8px rgba(0,0,0,.04);
  backdrop-filter:saturate(160%) blur(6px); -webkit-backdrop-filter:saturate(160%) blur(6px);
}
.top__cta a{font-weight:600; color:var(--ink)}
.top__cta a:hover{color:var(--akcent)}

/* pasek nagłówka na podstronach — mała grafika z nazwą, jak wcześniej */
.top--maly .top__art{height:clamp(56px,8vw,96px); object-position:center 84%}
.top--maly::after{display:none}
.top--maly .top__in{
  gap:.3rem;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.4) 75%, rgba(255,255,255,.2));
}
.top__mail{
  position:absolute; right:clamp(.8rem,3vw,1.6rem); top:50%; transform:translateY(-50%); z-index:2;
  font-size:.82rem; color:var(--ink-soft); background:rgba(255,255,255,.82);
  border:1px solid var(--line-soft); border-radius:999px; padding:.3rem .8rem; line-height:1.3;
  backdrop-filter:saturate(160%) blur(6px);
}
.top__mail:hover{color:var(--ink); border-color:var(--ink-faint)}
.top--maly{position:relative; border-bottom:1px solid var(--line-soft)}

/* ───────────── kategorie ───────────── */
.kat{
  display:inline-block; padding:.34rem .62rem; border-radius:6px;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; line-height:1;
}
.kat--budowa{background:#c4271d}
.kat--parking{background:#1f9d4d}
.kat--zarzadca{background:#e08600}
.kat--usterki{background:#0a6fd8}

/* wersja nakładana na zdjęcie */
.kat--foto{
  position:absolute; right:.8rem; top:.8rem; left:auto; z-index:2;
  border-radius:999px; padding:.36rem .72rem;
}

/* na stronie artykułu — sam tekst w kolorze kategorii, bez tła */
.art__glowa .kat{
  padding:0; border-radius:0; background:none; color:var(--ink); margin-bottom:.75rem;
}
.art__glowa .kat--budowa{color:#c4271d}
.art__glowa .kat--parking{color:#17843f}
.art__glowa .kat--zarzadca{color:#b86c00}
.art__glowa .kat--usterki{color:#0a5fbc}

/* ───────────── znacznik „na żywo" ───────────── */
.live{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
}
.live__kropka{
  flex:none; width:9px; height:9px; border-radius:50%; background:#e0301a;
  animation:dotPulse 1.9s ease-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(224,48,26,.55)}
  70%{box-shadow:0 0 0 10px rgba(224,48,26,0)}
  100%{box-shadow:0 0 0 0 rgba(224,48,26,0)}
}
@media (prefers-reduced-motion:reduce){.live__kropka{animation:none}}
.otwierajacy .kat--foto{right:clamp(1.1rem,2.6vw,1.7rem); top:clamp(1.1rem,2.6vw,1.7rem); left:auto}
.otwierajacy__tekst .live{color:#fff; margin-bottom:.75rem; text-shadow:0 1px 10px rgba(0,0,0,.55)}
.art__glowa .live{color:var(--ink-soft); margin-bottom:.8rem}

/* ───────────── strona główna ───────────── */
.glowna{max-width:var(--max); margin:0 auto; padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,4vw,2rem) 4rem}
.glowna__sekcja{
  margin:.1rem 0 .9rem; padding-left:.08rem;
  font-size:.7rem; font-weight:720; line-height:1.25;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.glowna__sekcja--najnowsze{margin:clamp(2.4rem,4.5vw,3.2rem) 0 1rem}

/* ── karuzela przypiętych artykułów (przesuwanie w poziomie, efekt „viewpager”) ── */
/* --podglad = ile widać sąsiedniego artykułu po każdej stronie */
.karuzela{position:relative; --podglad:15%}
.karuzela__tor{
  display:flex; gap:clamp(.7rem,1.6vw,1.2rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:.35rem 0;
  /* im bliżej krawędzi, tym sąsiedni artykuł słabiej widoczny */
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,.05) 0, #000 var(--podglad),
    #000 calc(100% - var(--podglad)), rgba(0,0,0,.05) 100%);
  mask-image:linear-gradient(to right,
    rgba(0,0,0,.05) 0, #000 var(--podglad),
    #000 calc(100% - var(--podglad)), rgba(0,0,0,.05) 100%);
}
.karuzela__tor::-webkit-scrollbar{display:none}
.karuzela__tor:focus-visible{outline:2px solid var(--ink); outline-offset:4px; border-radius:18px}
.karuzela__slajd{
  flex:0 0 calc(100% - 2 * var(--podglad)); scroll-snap-align:center;
  transform-origin:50% 50%; will-change:transform;
}
.karuzela__slajd:first-child{margin-left:var(--podglad)}
.karuzela__slajd:last-child{margin-right:var(--podglad)}
/* pojedynczy przypięty artykuł — zwykły kafel na całą szerokość, bez karuzeli */
.karuzela--jeden .karuzela__tor{
  overflow:visible; padding:0;
  -webkit-mask-image:none; mask-image:none;
}
.karuzela--jeden .karuzela__slajd{flex:0 0 100%; margin:0}

.karuzela__strzalka{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:clamp(2.2rem,4.4vw,2.9rem); height:clamp(2.2rem,4.4vw,2.9rem);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink);
  box-shadow:0 4px 16px rgba(10,11,13,.16); cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.karuzela__strzalka:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.karuzela__strzalka:disabled{opacity:0; pointer-events:none}
/* strzałki na styku artykułu aktywnego i podglądu następnego */
.karuzela__strzalka--wstecz{left:calc(var(--podglad) - clamp(1.1rem,2.2vw,1.45rem))}
.karuzela__strzalka--dalej{right:calc(var(--podglad) - clamp(1.1rem,2.2vw,1.45rem))}

.karuzela__kropki{display:flex; justify-content:center; gap:.5rem; margin-top:.95rem}
.karuzela__kropka{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--line); cursor:pointer;
  transition:background .2s ease, width .2s ease;
}
.karuzela__kropka.jest-aktywna{background:var(--ink); width:20px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .karuzela__tor{scroll-behavior:auto}
  .karuzela__slajd{transform:none !important; opacity:1 !important}
}

.otwierajacy{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  aspect-ratio:16/8.2; background:var(--paper-2);
}
.otwierajacy__foto{width:100%; height:100%; object-fit:cover}
/* zapas: gdyby przypiąć post, którego zdjęciem jest skan lub dokument (promo_kadr: contain) */
.otwierajacy--dok{background:#fff}
.otwierajacy--dok .otwierajacy__foto{
  object-fit:contain; object-position:50% 22%;
  padding:clamp(.9rem,2.2vw,1.5rem) clamp(.9rem,2.2vw,1.5rem) 34%;
}
.otwierajacy__cien{
  position:absolute; inset:auto 0 0 0; height:70%;
  background:linear-gradient(to top,rgba(10,11,13,.86) 0%,rgba(10,11,13,.5) 46%,rgba(10,11,13,0) 100%);
}
.otwierajacy__tekst{position:absolute; inset:auto 0 0 0; padding:clamp(1.3rem,3.6vw,2.6rem); color:#fff}
.otwierajacy__tekst h1,
.otwierajacy__tekst h2{
  margin:0; font-size:clamp(1.55rem,4.2vw,3.1rem); max-width:26ch; font-weight:640;
  text-shadow:0 1px 20px rgba(0,0,0,.4);
}
/* w karuzeli (dwa lub więcej przypiętych) tytuł jest mniejszy — kafel jest węższy */
.karuzela:not(.karuzela--jeden) .otwierajacy__tekst h1,
.karuzela:not(.karuzela--jeden) .otwierajacy__tekst h2{
  font-size:clamp(1.35rem,3.4vw,2.55rem); line-height:1.14;
}
.otwierajacy:hover .otwierajacy__foto{transform:scale(1.014)}
.otwierajacy__foto{transition:transform .5s ease}

.siatka{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.6vw,2.1rem)}

.karta{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); transition:border-color .2s, transform .2s}
.karta:hover{border-color:var(--ink-faint); transform:translateY(-2px)}
.karta__foto{position:relative; aspect-ratio:16/9; background:var(--paper-2); overflow:hidden; display:flex; align-items:center; justify-content:center}
.karta__foto img{width:100%; height:100%; object-fit:cover}
.karta__foto--dok{background:#fff; padding:.7rem}
.karta__foto--dok img{object-fit:contain; height:100%; width:auto; max-width:100%}
.karta__brak{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.karta__tekst{padding:clamp(1.05rem,2.1vw,1.45rem)}
.karta__tekst h2{margin:0; font-size:clamp(1.14rem,2.05vw,1.44rem); line-height:1.24}
/* strzałka pojawia się przy tytule po najechaniu na kafel */
.karta__tekst h2::after{
  content:"\2192"; display:inline-block; opacity:0; transform:translateX(-.25em);
  margin-left:.28em; font-weight:400;
  transition:opacity .2s ease, transform .2s ease;
}
.karta:hover .karta__tekst h2::after,
.karta:focus-within .karta__tekst h2::after{opacity:1; transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .karta__tekst h2::after{transition:none}
}

/* ───────────── pasek grupy na Facebooku (nad oświadczeniem) ───────────── */
/* bez własnej dolnej krawędzi — linię podziału daje border-top oświadczenia */
.fbpas{background:#eef5ff}
.fbpas__in{
  max-width:var(--max); margin:0 auto;
  padding:clamp(.7rem,1.6vw,.95rem) clamp(1.1rem,4vw,2rem);
  display:flex; align-items:center; justify-content:center; gap:.9rem;
}
.fbpas__logo{flex:none; display:block}
.fbpas__txt{margin:0; font-size:.88rem; line-height:1.4; color:var(--ink)}
.fbpas__txt b{font-weight:640; letter-spacing:-.015em}
.fbpas__txt span{display:block; margin-top:.08rem; font-size:.78rem; color:var(--ink-soft)}
.fbpas__btn{
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.05rem; border-radius:999px;
  background:#1877f2; color:#fff; font-size:.82rem; font-weight:640; letter-spacing:-.01em;
  transition:background .2s;
}
.fbpas__btn:hover{background:#0c5bc4}
.fbpas__btn:focus-visible{outline:2px solid #0c5bc4; outline-offset:3px}

/* ───────────── oświadczenie nad pierwszym postem ───────────── */
.oswiadczenie{
  background:var(--paper-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(.85rem,1.8vw,1.15rem) clamp(1.1rem,4vw,2rem);
}
.oswiadczenie__in{max-width:82ch; margin:0 auto; text-align:center}
.oswiadczenie__akt{margin:0 0 .6rem; line-height:1}
.oswiadczenie__akt time{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.34rem .8rem .34rem .68rem; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); font-size:.7rem; font-weight:600; letter-spacing:.03em;
  color:var(--ink-faint);
}
.oswiadczenie__akt time::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#34c759;
  animation:dotPulseZielona 2.4s ease-out infinite;
}
@keyframes dotPulseZielona{
  0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}
  70%{box-shadow:0 0 0 8px rgba(52,199,89,0)}
  100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}
}
@media (prefers-reduced-motion:reduce){.oswiadczenie__akt time::before{animation:none}}
.oswiadczenie__glowne{
  margin:0; font-size:clamp(.8rem,1.15vw,.88rem); line-height:1.55; color:var(--ink-soft);
}
.oswiadczenie__glowne strong{color:var(--ink); font-weight:640}
.oswiadczenie__drobne{
  margin:.4rem 0 0; font-size:.76rem; line-height:1.55; color:var(--ink-faint);
}
.oswiadczenie a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line)}
.oswiadczenie a:hover{text-decoration-color:var(--ink)}

/* ───────────── artykuł ───────────── */
.art{max-width:var(--art); margin:0 auto; padding:clamp(2rem,5vw,3.4rem) clamp(1.1rem,4vw,1.5rem) 1rem}
.art__glowa h1{margin:.6rem 0 .9rem; font-size:clamp(1.72rem,4.4vw,2.62rem)}
.art__lead{margin:0; font-size:clamp(1.05rem,2.1vw,1.24rem); line-height:1.5; color:var(--ink-soft); font-weight:520}

.art__promo{margin:clamp(1.6rem,4vw,2.4rem) 0}
.art__promo img{width:100%; border-radius:12px}
figure{margin:1.9rem 0}
figure img{border-radius:10px; border:1px solid var(--line-soft)}
figcaption{margin-top:.6rem; font-size:.8rem; line-height:1.5; color:var(--ink-faint)}

.art__tresc h2{margin:2.4rem 0 .8rem; font-size:clamp(1.16rem,2.3vw,1.42rem)}
.art__tresc h3{margin:1.9rem 0 .6rem; font-size:1.02rem; font-weight:640; color:var(--ink-soft)}
.art__tresc h2+h3{margin-top:1.2rem}
.art__tresc p{margin:0 0 1.05rem}
.art__tresc>p:first-child{font-size:1.05rem}
/* odnośniki do innych artykułów w treści — muszą być widoczne jako linki */
.art__tresc a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.18em}
.art__tresc a:hover{text-decoration-color:var(--akcent)}

blockquote{
  position:relative; margin:2rem 0; padding:.1rem 0 .1rem 2.9rem;
  background:none; border:0; border-radius:0;
}
blockquote::before{
  content:"\201E"; position:absolute; left:0; top:.5rem;
  font-size:3.6rem; line-height:0; color:var(--line); font-weight:700;
}
blockquote p{
  margin:0; font-style:italic; font-size:1.07rem; line-height:1.62; color:var(--ink);
}
blockquote p strong{font-weight:640}

blockquote.cytat--lista ul{margin:0; padding-left:1.15rem}
blockquote.cytat--lista li{
  margin:0 0 .55rem; font-style:italic; font-size:1.07rem; line-height:1.62; color:var(--ink);
}
blockquote.cytat--lista li::marker{color:var(--line-strong,#c4c8ce)}
blockquote.cytat--lista li:last-child{margin-bottom:0}

.lista{margin:0 0 1.2rem; padding-left:1.2rem}
.lista li{margin-bottom:.45rem}

.os{list-style:none; margin:1.4rem 0; padding:0 0 0 1.35rem; border-left:2px solid var(--line)}
.os li{position:relative; padding:0 0 1.1rem 0}
.os li::before{content:""; position:absolute; left:calc(-1.35rem - 4px); top:.6rem; width:7px; height:7px; border-radius:50%; background:var(--ink)}
.os__kiedy{display:block; font-size:.82rem; font-weight:600; color:var(--ink-faint)}
.os__co{display:block; margin-top:.15rem}

.zrodla,.nota{
  display:grid; grid-template-columns:7.2rem 1fr; gap:0 1.5rem;
  margin:2.2rem 0; padding:1.15rem 0;
  background:none; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft);
  border-radius:0;
}
.zrodla p,.nota p{margin:0; font-size:.86rem; line-height:1.6; color:var(--ink-soft)}
.zrodla__lab,.nota__lab{
  padding-top:.18rem; font-size:.7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; line-height:1.5; color:var(--ink-faint);
}

.opinia{
  position:relative; display:block; overflow:hidden;
  margin:3rem 0; padding:1.9rem 2.1rem 2rem 4.6rem;
  background:var(--ink); border-radius:14px;
}
.opinia::before{
  content:"\201E"; position:absolute; left:1.05rem; top:4.4rem;
  font-size:8.5rem; line-height:0; font-weight:700;
  color:rgba(255,255,255,.13); pointer-events:none;
}
.opinia__lab{
  display:block; margin-bottom:.85rem;
  font-size:.68rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; line-height:1.5; color:rgba(255,255,255,.5);
}
.opinia p{
  margin:0; max-width:35em;
  font-style:italic; font-size:1.2rem; line-height:1.62;
  letter-spacing:-.006em; color:#fff;
}
.opinia p strong{font-style:normal; font-weight:640; color:#fff}
.opinia a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45)}
.opinia a:hover{text-decoration-color:#fff}

.galeria{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.9rem 0}
.galeria figure{margin:0}

.art__powrot{margin:2.6rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line-soft); font-size:.9rem}
.art__powrot a{color:var(--ink-soft)}
.art__powrot a:hover{color:var(--akcent)}

/* ───────────── czytaj dalej ───────────── */
.dalej{max-width:var(--art); margin:0 auto; padding:2.4rem clamp(1.1rem,4vw,1.5rem) 4rem}
.dalej h2{font-size:1.02rem; letter-spacing:-.02em; margin-bottom:1rem}
.dalej__in{display:grid; gap:.7rem}
.dalej__poz{display:block; padding:.95rem 1.1rem; border:1px solid var(--line); border-radius:11px; transition:border-color .2s}
.dalej__poz:hover{border-color:var(--ink-faint)}
.dalej__tyt{display:block; margin-top:.25rem; font-weight:640; letter-spacing:-.02em}

/* ───────────── stopka ───────────── */
.stopka{border-top:2px solid var(--ink); background:var(--paper-3)}
.stopka__in{
  max-width:var(--max); margin:0 auto; padding:clamp(2rem,4vw,3rem) clamp(1.1rem,4vw,2rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,4vw,3.4rem);
}
.stopka h3{font-size:.78rem; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.stopka p{margin:.7rem 0 0; font-size:.85rem; line-height:1.6; color:var(--ink-soft)}
.stopka a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line)}
.stopka a:hover{text-decoration-color:var(--akcent)}
.stopka__baza{
  max-width:var(--max); margin:0 auto; padding:1.1rem clamp(1.1rem,4vw,2rem) 2rem;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
}

/* ───────────── mobile ───────────── */
@media (max-width:820px){
  .stopka__in{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .fbpas__in{flex-wrap:wrap; justify-content:flex-start; gap:.7rem .75rem}
  .fbpas__txt{flex:1 1 0; min-width:0}
  .fbpas__btn{width:100%; justify-content:center}
  .siatka{grid-template-columns:1fr}
  .otwierajacy{aspect-ratio:4/3.4}
  .karuzela{--podglad:9%}
  .karuzela__strzalka{display:none}
  .galeria{grid-template-columns:1fr}
  .zrodla,.nota{grid-template-columns:1fr; gap:.45rem}
  .opinia{margin:2.4rem 0; padding:1.45rem 1.3rem 1.55rem 2.75rem; border-radius:12px}
  .opinia::before{left:.75rem; top:2.55rem; font-size:4.4rem}
  .opinia p{font-size:1.08rem; line-height:1.58}
  blockquote{padding-left:2.3rem}
}