.ps_glowna {display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 auto; min-width: 320px; max-width: 1440px; padding: 0;}

section {box-sizing: border-box; padding-bottom: clamp(20px, 5.53vw, 80px); padding-top: clamp(20px, 5.53vw, 80px);}
section h1 {font-size: clamp(24px, 4vw, 48px); font-weight: bold; line-height: 110%;}
section h2 {font-size: clamp(24px, 3.21vw, 32px); font-weight: bold; line-height: 120%;}
section h3 {font-size: 14px; font-weight: 500; letter-spacing: 5px; line-height: 115%;}
.oslr {padding-left: clamp(20px, 5.53vw, 64px); padding-right: clamp(20px, 5.53vw, 64px);}
.oh1b {padding-bottom: clamp(32px, 5.53vw, 80px);}
.oh2b {padding-bottom: clamp(32px, 2.77vw, 40px);}
.oh3b {padding-bottom: 16px;}
.o2shadow {padding-bottom: 32px; padding-top: clamp(32px, 5.53vw, 80px);}
section.reklama {padding: 0;}

section.top4 {padding-top: clamp(40px, 5.53vw, 80px);}
section.top4 > div {display: grid; gap: 32px; grid-template-columns: 1fr 1fr 1fr 1fr; padding-top: clamp(32px, 5.53vw, 80px);}
section.top4 > div > div {border: 2px solid #1f3875; box-sizing: border-box; border-radius: 16px; cursor: pointer; display: flex; flex-direction: column; font-size: clamp(20px, 2.23vw, 32px); font-weight: 600; gap: 16px; padding: 24px; text-align: center;}
section.top4 > div > div > div {display: flex; flex-direction: column; gap: 16px;}
section.top4 > div > div > div > img {height: 40px;}
section.top4 > div > div:nth-of-type(2) > div > img, section.top4 > div > div:nth-of-type(3) > div > img {height: 30px; margin: 5px 0;}
section.top4 > div > div > button {cursor: pointer; margin: 0 auto; width: fit-content;}

.scrollBox {display: grid;}
.scroller {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; min-width: 0; overflow: hidden; scrollbar-width: none; scroll-behavior: smooth;}
.kafelek {border-radius: 16px; box-shadow: 0px 4px 25px 0px #00000026; cursor: pointer; min-width: 0; transition: transform 0.4s ease;}
.kafelek:hover {transform: scale(1.05);}

a.karta {display: flex; flex-direction: column; flex: 1; gap: 16px;}
a.karta > img {border-radius: 16px; height: 300px; object-fit: cover; width: 100%;}
a.karta > p:nth-of-type(1) {font-size: 20px; font-weight: 500; line-height: 115%;}
a.karta > p:nth-of-type(2) {color: #1f3875;}
dzial {border-radius: 4px; color: #ffffff; font-size: 14px; font-weight: 600; padding: 4px 10px; width: fit-content;}
dzial.stacje {background-color: #4285f4;}
dzial.sprzet {background-color: #64bf94;}

div.przyciski {display: grid; gap: 32px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: clamp(32px, 5.53vw, 40px);}
div.przyciski > div {border: 2px solid #1f3875; box-sizing: border-box; border-radius: 16px; cursor: pointer; display: flex; flex: 1; flex-direction: column; gap: 16px; justify-content: space-between; padding: 22px 20px; text-align: center;}
div.przyciski > div > div {display: flex; flex-direction: column; font-size: clamp(20px, 2.23vw, 32px); font-weight: 600; gap: 16px;}
div.przyciski > div > div > img {height: 40px;}
div.przyciski > div > p {font-size: clamp(16px, 1.26vw, 18px); line-height: 140%; text-align: left;}
div.przyciski > div > button {margin: 0 auto; width: fit-content;}

.wyjazdy > div.banner {background: linear-gradient(180deg, rgba(25, 41, 112, 0.3) 37.96%, rgba(255, 255, 255, 0) 99.98%), url("/glowna/wyjazdy-banner.jpg"); background-position: center 56%; background-repeat: no-repeat; background-size: cover; border-radius: 16px; box-shadow: 0px 4px 25px 0px #00000026; box-sizing: border-box; color: #ffffff; display: block; margin: 0 clamp(20px, 5.53vw, 64px); padding: clamp(20px, 4.1vw, 64px);}
.wyjazdy > div.banner > p:first-of-type {font-size: clamp(32px, 4.5vw, 48px); font-weight: 700;}
.wyjazdy > div.banner > p:last-of-type {font-size: clamp(16px, 10vw, 18px); margin: 24px 0; width: 75%;}

.wyjazdy a.kafelek {background-position: center; background-size: cover; box-sizing: border-box; color: #ffffff; font-size: 20px; font-weight: 600; height: clamp(300px, 53vw, 365px); padding: 16px;}
.wyjazdy > button, .stacje > button {float: right; justify-self: end; margin: 16px clamp(20px, 5.53vw, 64px) 0 clamp(20px, 5.53vw, 64px); width: fit-content;}

.stacje > h1 {margin-bottom: clamp(16px, 2.5vw, 24px)}
.stacje input {margin-top: 8px; width: 100%;}
.stacje > div:first-of-type {padding-top: clamp(32px, 3vw, 40px);}
.stacje > .scroller > .kafelek > div:first-of-type {background-size: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; height: 264px;}
.stacje > .scroller > .kafelek > div:nth-of-type(n+2) {border: 1px solid #e0e3ea; border-bottom: 0; border-top: 0; padding: 0 16px;}
.stacje > .scroller > .kafelek > div:last-of-type {border: 1px solid #e0e3ea; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-top: 0; padding-bottom: 10px;}
.stacje > .scroller > .kafelek > div:nth-of-type(2) {font-size: 24px; font-weight: 600; overflow: hidden; padding-bottom: 6px; padding-top: 16px; text-overflow: ellipsis; white-space: nowrap;}
.stacje > .scroller > .kafelek > div:nth-of-type(n+3) {display: flex;}
.stacje > .scroller > .kafelek > div:nth-of-type(n+3) > p:first-of-type {background-repeat: no-repeat; background-position: left center; flex: 2; padding: 6px 6px 6px 32px;}
.stacje > .scroller > .kafelek > div:nth-of-type(n+3) > p:last-of-type {flex: 1; padding: 6px 6px 6px 0; text-align: right;}
.stacje > .scroller > .kafelek > div:nth-of-type(3) > p:first-of-type {background-image: url('/images/ikony/iko-trasy-niebieskie.svg');}
.stacje > .scroller > .kafelek > div:nth-of-type(4) > p:first-of-type {background-image: url('/images/ikony/iko-trasy-czerwone.svg');}
.stacje > .scroller > .kafelek > div:nth-of-type(5) > p:first-of-type {background-image: url('/images/ikony/iko-trasy-czarne.svg');}

.stacje > div > button, .sprzet > button {float: right;}

.forum {display: grid; gap: 24px clamp(20px, 5.53vw, 80px); grid-template-areas: "dzial dzial" "tytul foto" "opis foto" "przycisk foto"; grid-template-columns: 3fr 2fr;}
.forum > h3 {grid-area: dzial;}
.forum > h1 {grid-area: tytul;}
.forum > p {grid-area: opis; font-size: 18px;}
.forum > button {grid-area: przycisk; height: fit-content; width: fit-content;}
.forum > div {grid-area: foto; background: url('/glowna/forum.jpg') no-repeat 40% 40%; background-size: cover; border-radius: 16px;}
.ubezpieczenia > div {background-image: url('/glowna/ubezpieczenia.jpg'); background-position: 80% 20%;}

.newsletter {background: linear-gradient(90deg, rgba(31, 56, 117, 0.5) 31.95%, rgba(0, 0, 0, 0) 100%), url('/images/hero/03_2160x1080.jpg') no-repeat left 10%; background-size: cover; color: #ffffff; display: flex; flex-direction: column; justify-content: center;}
.newsletter a {color: #ffffff; text-decoration: underline;}
.newsletter > p:first-of-type {font-size: clamp(16px, 1.26vw, 18px); margin: 24px 0 32px 0; width: clamp(400px, 50.4vw, 700px);}
.newsletter > p:last-of-type {font-size: 12px; margin-top: 18px;}
.newsletter > form > div {display: flex; gap: 16px;}
.newsletter > form > div > input {width: 350px;}

@media (max-width: 1439px) {
	section.top4 > div {grid-template-columns: 1fr 1fr;}
	section.top4 > div > div > div {align-items: center; flex-direction: row; gap: 16px; justify-content: center;}
}

@media (max-width: 1199px) {
	.scroller {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);}
	.scroller .karta:nth-child(n+7) {display: none;}
	.wyjazdy > .scroller {grid-template-columns: 1fr 1fr;}
	.stacje > .scroller > .kafelek:last-of-type {display: none;}
}

@media (max-width: 999px) {
	.newsletter {background-position: left 25%; background-size: auto;}
	.newsletter > p:first-of-type {width: clamp(280px, 50.4vw, 700px);}
}

@media (max-width: 899px) {
	.scroller {grid-template-columns: 1fr 1fr;}
	.scroller .karta:nth-child(n+5) {display: none;}
	.stacje > .scroller > .kafelek:last-of-type {display: block;}
}

@media (max-width: 849px) {
	div.przyciski {grid-template-columns: 1fr; grid-auto-rows: 1fr;}
	div.przyciski > div > div {align-items: center; flex-direction: row; justify-content: center;}
	div.przyciski > div > div > img {height: 32px;}
	div.przyciski > div > p {text-align: center;}
}

@media (max-width: 799px) {
	.forum {grid-template-areas: "dzial dzial" "tytul tytul" "opis foto" "przycisk foto";}
}

@media (max-width: 699px) {
	section.top4 > div {grid-template-columns: 1fr;}
	section.top4 > div > div {flex-direction: row;}
	section.top4 > div > div > div {width: 200px;}
}

@media (max-width: 599px) {
	.scroller {grid-auto-flow: column; grid-auto-columns: 70%; grid-template-columns: unset; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
	.scroller::-webkit-scrollbar {display: none;}
	.scroller .karta:nth-child(n+5) {display: flex;}
	.scroller_controls {display: none;}
	.wyjazdy > .scroller {grid-template-columns: unset;}
	.wyjazdy > div.banner {border-radius: 0; margin: 0; width: 100%;}
	.forum {grid-template-areas: "dzial" "tytul" "opis" "przycisk" "foto"; grid-template-columns: 1fr;}
	.forum > div {height: clamp(160px, 50.1vw, 300px); background-position: center 30%;}
	.forum > button {justify-self: end;}
	.newsletter > form > div {flex-direction: column;}
	.newsletter > form > div > input {width: 100%;}
}

@media (max-width: 564px) {
	section.top4 > div > div {flex-direction: column;}
	section.top4 > div > div > div {width: auto;}
	section.top4 > div > div > div > img {height: 34px;}
	section.top4 > div > div:nth-of-type(2) > div > img, section.top4 > div > div:nth-of-type(3) > div > img {height: 24px;}
	.scroller {grid-auto-columns: 80%;}
	.wyjazdy > div.banner {background-position: left top;}
}

@media (max-width: 500px) {
	.wyjazdy > div.banner > p:first-of-type {width: 270px;}
	.wyjazdy > div.banner > p:last-of-type {width: 100%;}
}

@media (max-width: 385px) {
	section.top4 > div > div > button {font-size: 14px; width: auto;}
	.scroller {grid-auto-columns: 87%;}
	.wyjazdy > button, .stacje > button {justify-self: auto; width: auto;}
	.sprzet > button, .stacje > div > button {float: none; width: 100%;}
	.wyjazdy > div.banner > button, .forum > button {width: 100%;}
}