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

div.hero > div > span {width: auto;}
div.hero .wyszukiwarka_formularz {padding: 0;}

.hero {height: 600px; /* clamp(360px, 41.5vw, 600px); overflow: hidden; */ max-width: 1440px; position: relative;}
.hero::after {background: linear-gradient(360deg, rgba(255, 255, 255, 0.15) 0%, rgba(31, 107, 92, 0.3) 0%); content: ''; position: absolute; inset: 0; z-index: 0;}
.hero > img, .hero > video {height: 100%; inset: 0; justify-content: unset; object-fit: cover; padding: 0; position: absolute; width: 100%;}
.hero > video {z-index: 1;}
.hero > div {position: relative; z-index: 2;}
.hero > div > p {color: #ffffff; font-size: clamp(24px, 4vw, 56px); font-weight: bold; line-height: 120%;}
.hero > div > span {color: #ffffff; font-size: clamp(16px, 1.7vw, 24px); line-height: 120%; width: clamp(230px, 60vw, 577px);}
.hero .wyszukiwarka_formularz form {flex-direction: row; margin: 0 0 clamp(40px, 5.53vw, 80px) 0; padding: 12px 16px;}
/* .hero .wyszukiwarka_formularz .form_field {width: auto;} */
.hero .wyszukiwarka_formularz .form_field_wrapper {margin-top: 5px;}
.hero .wyszukiwarka_formularz .button.search {margin-top: 20px; width: auto;}
.hero .wyszukiwarka_formularz ul {display: flex; gap: 8px; padding: 0;}
.hero .wyszukiwarka_formularz li {display: inline;}

section {box-sizing: border-box; padding-bottom: clamp(40px, 5.53vw, 80px); padding-top: clamp(40px, 5.53vw, 80px);}
section h1 {font-size: clamp(24px, 4vw, 48px); font-weight: bold; line-height: 110%; margin-bottom: 16px; text-align: center;}
section h2 {font-size: clamp(16px, 2.21vw, 24px); font-weight: normal; line-height: 140%; text-align: center;}
.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.slogan {background-color: var(--kolor-navi-tlo);}

section.top4 {background-color: var(--kolor-navi-tlo);}
section.top4 > div {display: grid; gap: 32px; grid-template-columns: 1fr 1fr 1fr 1fr; padding-top: clamp(16px, 2.10vw, 40px);}
section.top4 > div > div {display: flex; flex-direction: column; font-size: clamp(12px, 2vw, 16px); font-weight: 300; gap: 8px; line-height: 110%; padding: 0 24px; text-align: center;}
section.top4 > div > div > img {height: clamp(60px, 10vw, 80px); margin-bottom: 8px;}
section.top4 > div > div > p:first-of-type {font-size: clamp(16px, 3vw, 28px); font-weight: 600; line-height: 110%;}

.snapBox {display: grid;}
.snapBox > h1, .snapBox > h2, .snapBox > .tiles, .snapBox > .mainButton {padding-left: clamp(10px, 5.9vw, 97px); padding-right: clamp(10px, 5.9vw, 97px);}
.snapBox > .tiles {display: grid; gap: 32px; grid-auto-columns: minmax(330px, 1fr); grid-auto-flow: column; margin: 48px 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;}
.snapBox > .tiles::-webkit-scrollbar {display: none;}
.snapBox > .tiles > * {scroll-snap-align: center;}
.snapBox > .dots {display: none; gap: 8px; justify-content: center;}
.snapBox > .dots span {background: #dde9e7; border-radius: 50%; cursor: pointer; height: 8px; transition: 0.3s; width: 8px;}
.snapBox > .dots span.active {background: #1f6b5c;}
.snapBox > .mainButton {text-align: center;}

.staticBox > .tiles {display: grid; gap: 32px; grid-template-columns: 1fr 1fr 1fr; margin: 0 40px 64px 40px;}

a.karta {border: var(--ramka); border-radius: var(--zaokraglenia-lato); display: flex; flex-direction: column; flex: 1; gap: 16px;}
a.karta > img {border-top-left-radius: var(--zaokraglenia-lato); border-top-right-radius: var(--zaokraglenia-lato); height: 192px; object-fit: cover; width: 100%;}
a.karta > p:nth-of-type(1) {color: var(--kolor-tytul); font-size: 20px; font-weight: 500; line-height: 115%; padding: 8px 24px 0 24px;}
a.karta > p:nth-of-type(2) {color: var(--kolor-opis); font-size: 16px; font-weight: normal; line-height: 115%; padding: 0 24px 0 24px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
a.karta > p:nth-of-type(3) {background: url('/images/ikony/iko-kalendarz2.svg') no-repeat 24px center; color: var(--kolor-opis); font-size: 14px; font-weight: normal; line-height: 115%; padding: 0 24px 0 48px;}
a.karta > p:last-of-type {color: var(--kolor-lato-normal); padding: 8px 0 32px 0; text-align: center;}

.wyjazdy a.karta {gap: 8px; position: relative;}
.wyjazdy a.karta > p {margin: 0; padding: 0 16px;}
.wyjazdy a.karta > p:nth-of-type(1) {font-size: 18px; font-weight: bold; padding-top: 8px;}
.wyjazdy a.karta > p:nth-of-type(2) {height: 50px; line-height: 20px;}
.wyjazdy a.karta > p:nth-of-type(3) {background-position: 16px center; padding-left: 40px;}
.wyjazdy a.karta > p:nth-of-type(4) {background-color: #ffffff; border-radius: 20px; box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a; color: var(--kolor-normal); font-size: 16px; font-weight: bold; margin: 16px; padding: 4px 12px; position: absolute; right: 0; top: 0;}
.wyjazdy a.karta > p:nth-of-type(5) {padding: 8px 16px 16px 16px;}
.wyjazdy a.karta > p > button {width: stretch;}

.newsy a.karta > p:nth-of-type(1), .blog_list a.karta > p:nth-of-type(1) {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.ubezpieczenia > div.tiles {gap: 24px; padding: 14px clamp(20px, 7.51vw, 143px) 0 clamp(20px, 7.51vw, 143px); margin-bottom: 0;}
.ubezpieczenia > div.tiles > div {border: var(--ramka); border-radius: var(--zaokraglenia-lato); cursor: pointer; margin: 14px 0; padding: 24px 24px 32px 24px; text-align: center;}
.ubezpieczenia > div.tiles > div:nth-last-of-type(2) {border: var(--ramka2normal); box-shadow: 0px 8px 10px -6px #0000001a, 0px 20px 25px -5px #0000001a; margin: 0;}
.ubezpieczenia > div.tiles > div > img {border-radius: 50%; display: block; margin: 0 auto;}
.ubezpieczenia > div.tiles > div:nth-last-of-type(2) > img {margin-top: 24px;}
.ubezpieczenia > div.tiles > div > p {text-align: center;}
.ubezpieczenia > div.tiles > div > p:nth-of-type(1) {color: var(--kolor-tytul); font-size: 24px; font-weight: 600; margin: 20px 0 11px 0;}
.ubezpieczenia > div.tiles > div > p:nth-of-type(2) {color: var(--kolor-tytul); font-size: 36px; font-weight: bold;}
.ubezpieczenia > div.tiles > div > p:nth-of-type(3) {color: var(--kolor-opis); font-size: 16px; font-weight: normal; margin: 4px 0 24px 0;}
.ubezpieczenia > div.tiles > div > ul {list-style: none; padding: 0 0 12px 3px;}
.ubezpieczenia > div.tiles > div > ul > li {background: url('/images/ikony/tarcza-lato.svg') left 3px no-repeat; padding: 0 0 13px 27px; text-align: left;}
.ubezpieczenia > div.tiles > div > div {background: linear-gradient(90deg, #1f6b5c 47.39%, #bad1cc 100%); border-radius: var(--zaokraglenia-lato); color: #ffffff; font-size: 14px; margin: -40px auto 0 auto; padding: 4px 20px; position: relative; width: fit-content;}

.newsletter {align-items: center; background-color: var(--kolor-normal); color: #ffffff; display: flex; flex-direction: column; justify-content: center;}
.newsletter img {border-radius: 50%; margin-bottom: 22px;}
.newsletter a {color: #ffffff; text-decoration: underline;}
.newsletter > p:first-of-type {font-size: clamp(16px, 1.26vw, 18px); margin-bottom: 22px; text-align: center;}
.newsletter > p:last-of-type {font-size: 12px; margin-top: 18px;}
.newsletter > form > div {display: flex; gap: 16px;}
.newsletter > form > div > input {background: #ffffff; width: 350px;}

.blog_1st {padding-bottom: 0; padding-top: 0;}
.blog_list {padding-bottom: 0;}
.blog_list > .tiles {margin-top: 0; padding: 0;}
.blog_naglowek {display: grid; gap: 24px; grid-template-columns: 1fr 1fr;}
.blog_naglowek > div:first-of-type {padding: 0 clamp(0px, 1.67vw, 24px);}
.blog_naglowek > div > h1 {color: var(--kolor-tytul); font-size: clamp(20px, 2.78vw, 40px); font-weight: 500; line-height: 110%; text-align: left;}
.blog_naglowek > div > p:first-of-type {color: var(--kolor-opis); line-height: 150%;}
.blog_naglowek > div > p:last-of-type {background: url(/images/ikony/iko-kalendarz2.svg) no-repeat 0 center; color: var(--kolor-opis); font-size: 14px; line-height: 150%; margin-top: 16px; padding-left: 24px;}
.blog_naglowek > div > img, .blog_tresc img {border-radius: 14px; width: 100%;}
.blog_naglowek > div > div {font-size: 14px; font-weight: 300; text-align: center;}
.blog_tresc {box-sizing: unset; margin: 0 auto; max-width: 768px; padding-top: 0;}
.blog_tresc > h1, .blog_tresc > h2, .blog_tresc > h3, .blog_tresc > p, .blog_tresc > ul {padding-bottom: 16px;}
.blog_tresc a {text-decoration: underline;}

@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) {
	.ubezpieczenia div.tiles {margin-bottom: 0; padding: 14px clamp(15px, 4vw, 30px) 0 clamp(15px, 4vw, 30px);}
	.staticBox > .tiles {grid-template-columns: 1fr 1fr; margin-left: clamp(0px, 3.34vw, 40px); margin-right: clamp(0px, 3.34vw, 40px);}
}

@media (max-width: 899px) {
	.newsy > .tiles {gap: clamp(16px, 4.5vw, 32px); grid-template-columns: repeat(3, minmax(clamp(280px, 87.5vw, 330px), 1fr)); padding-left: clamp(16px, 4.5vw, 97px); padding-right: clamp(16px, 4.5vw, 97px);}
}

@media (max-width: 849px) {
	.hero .wyszukiwarka_formularz form, .hero .wyszukiwarka_formularz ul {flex-direction: column;}
	.hero .wyszukiwarka_formularz ul {flex-direction: column;}
	.hero .wyszukiwarka_formularz .form_field {width: 240px;}
	.hero .wyszukiwarka_formularz .button.search {margin-top: 0; width: 240px;}
	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;}
	.blog_naglowek {grid-template-columns: 1fr;}
	.blog_naglowek > div:first-of-type {padding: 0;}
}

@media (min-width: 750px) {
	.blog_1st a.karta {display: grid; gap: 16px 24px; grid-template-columns: 50% 1fr; grid-template-rows: auto max(37px) 18px auto;}
	.blog_1st a.karta > img {border-radius: var(--zaokraglenia-lato) 0 0 var(--zaokraglenia-lato); grid-row: 1 / -1; height: 100%; object-fit: cover; width: 100%;}
	.blog_1st a.karta > p {padding: 0 24px 0 0;}
	.blog_1st a.karta > p:nth-of-type(1) {align-self: flex-end; font-size: clamp(20px, 2.78vw, 40px);}
	.blog_1st a.karta > p:nth-of-type(3) {align-self: center; background-position: 0 center; padding: 0 24px;}
}

@media (min-width: 700px) {
	.snapBox:not(.ubezpieczenia) > .tiles {margin: 48px 96px; padding: 0;}
	.newsy, .wyjazdy {position: relative;}
	.scroller_controls {position: static;}
	.scroller_controls .strzalka {background: url('/images/ikony/iko-strzalka-on-emerald.svg') no-repeat center center; cursor: pointer; height: 48px; position: absolute; top: 50%; transition: 0.2s; width: 48px; z-index: 2; -webkit-tap-highlight-color: transparent;}
	.scroller_controls .strzalka.przesun_w_prawo {transform: rotate(180deg);}
	.scroller_controls .strzalka.disabled {background: url('/images/ikony/iko-strzalka-off.svg') no-repeat center center; cursor: default; pointer-events: none;}
	.scroller_controls .przesun_w_lewo {left: 24px;}
	.scroller_controls .przesun_w_prawo {right: 24px;}
}

@media (max-width: 699px) {
	section.top4 > div > div {padding: 0;}
	.snapBox > .dots {display: flex; margin-bottom: 32px; margin-top: -16px;}
	.staticBox > .tiles {grid-template-columns: 1fr;}
	.ubezpieczenia {padding-bottom: 16px;}
	.ubezpieczenia > .tiles {margin-bottom: 0;}
	.ubezpieczenia > .dots {margin-bottom: 0; margin-top: 24px;}
}

@media (max-width: 564px) {
	.newsletter > form > div {flex-direction: column; align-items: center; width: 280px;}
	.newsletter > form > div > input {width: 100%;}
	.newsletter > form > div > button {width: stretch;}
}

@media (max-width: 400px) {
	.hero .wyszukiwarka_formularz .form_field {width: 100%;}
	.hero .wyszukiwarka_formularz .button.search {width: 100%;}
	.staticBox > .tiles {gap: 16px; margin-left: 0; margin-right: 0;}
}

@media (max-width: 385px) {
	section.top4 > div > div > button {font-size: 14px; width: auto;}
	.snapBox > .mainButton > button {width: stretch;}
	.ubezpieczenia div.tiles {grid-template-columns: repeat(3, minmax(290px, 1fr));}
	.ubezpieczenia div.tiles > div > ul > li {background-position-y: 1px; background-size: 14px; padding-left: 23px; font-size: 14px;}
}