/***********************************************
* BLOK TYP AUTOBUSÓW — FINALNY CSS POD PHP
***********************************************/
.typautobus-block {
background: var(--Color-Blue-Dark-Blue-Dark-800, #003E8B);
}
.typautobus-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 100px 00px;
font-family: Inter, sans-serif;
color: #FFFFFF;
display: flex;
flex-direction: column;
gap: 40px;
}
.typautobus-header .top {
display: flex;
}
.typautobus-header .top > div:first-of-type {
padding-right: 248px;
position: relative;
color: var(--Color-Blue-Blue-100, #CCDAEB);
text-align: center;
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 130%; /* 23.4px */
text-transform: uppercase;
}
.typautobus-header .top > div:first-of-type::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
display: block;
width: 208px;
height: 6px;
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml,');
}
.typautobus-header .top > div:last-of-type {
color: var(--Color-Base-White, #FFF);
text-align: center;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
.typautobus-header .bottom {
display: flex;
gap: 60px;
}
.typautobus-header .bottom .typautobus-title {
color: var(--Color-Base-White, #FFF);
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 42px;
font-style: normal;
font-weight: 300;
line-height: 140%; /* 58.8px */
}
.typautobus-header .bottom .typautobus-opisy {
display: flex;
flex-direction: column;
gap: 40px;
}
.typautobus-header .bottom .typautobus-opisy .typautobus-opis-box {
padding-left: 40px;
display: flex;
flex-direction: column;
gap: 8px;
border-left: 2px solid #4D7DB8;
}
.typautobus-header .bottom .typautobus-opisy .typautobus-opis-box h4 {
color: var(--Color-Base-White, #FFF);
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 27px */
margin: 0px;
}
.typautobus-header .bottom .typautobus-opisy .typautobus-opis-box p {
margin: 0px;
color: var(--Color-Blue-Blue-100, #CCDAEB);
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 22.5px */
}
.typautobus-grid {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.typautobus-grid h3 {
flex: 0 0 100%;
color: var(--Color-Base-White, #FFF);
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 33.6px */
margin: 0px;
}
.typautobus-grid .typautobus-item {
display: flex;
flex-direction: column;
gap: 16px;
flex: 0 0 calc(50% - 20px);
max-width: calc(50% - 20px);
border-bottom: 2px solid #4D7DB8;
}
.typautobus-grid .typautobus-item .fslightboxGallery {
max-width: 100%;
}
.typautobus-grid .typautobus-item .fslightboxGallery img {
max-width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 3 / 2;
border: 2px solid #fff;
}
.typautobus-grid .typautobus-item .typautobus-icons {
display: flex;
gap: 40px;
}
.typautobus-button-wrap {
justify-content: center;
display: flex;
}
.typautobus-grid .typautobus-item .typautobus-icons > * {
padding-left: 60px;
display: flex;
flex-direction: column;
gap: 4px;
color: var(--Color-Base-White, #FFF);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
position: relative;
}
.typautobus-grid .typautobus-item .typautobus-icons > * span:last-of-type {
font-weight: 600;
}
.typautobus-info h4 {
margin-bottom: 0px;
}
.typautobus-grid .typautobus-item .typautobus-icons > div:first-of-type::before {
content: "";
position: absolute;
left: 00px;
top: 50%;
transform: translateY(-50%);
display: block;
width: 42px;
height: 42px;
background-repeat: no-repeat;
background-size: 36px 40px;
background-position: center;
background-image: url('data:image/svg+xml,');
}
.typautobus-grid .typautobus-item .typautobus-icons > div:last-of-type {
padding-left: 70px;
}
.typautobus-grid .typautobus-item a {
display: block;
position: relative;
}
.typautobus-grid .typautobus-item .typautobus-icons > div:last-of-type::before {
content: "";
position: absolute;
left: 00px;
top: 50%;
transform: translateY(-50%);
display: block;
width: 60px;
height: 42px;
background-repeat: no-repeat;
background-size: 59px 42px;
background-position: center;
background-image: url('data:image/svg+xml,');
}
.typautobus-grid .typautobus-item a:hover::before {
display: block;
content: "";
position: absolute;
left: 00px;
top: 50%;
transform: translateY(-50%);
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 61px 56px;
background-position: center; transition: all 1s ease;
background-image: url('data:image/svg+xml,');
}
.typautobus-grid .typautobus-item a:hover img {
transition: all 1s ease;
opacity: 0.5;
}
@media (max-width: 1024px) {
.typautobus-header .top, .typautobus-header .bottom {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: flex-start;
align-items: flex-start;
}
.typautobus-header .top > div:first-of-type::after {
display: none;
}
.typautobus-block {
padding: 60px 20px;
}
.typautobus-wrap {
padding: 0px;
}
.typautobus-grid {
gap: 24px 40px;
}
.typautobus-grid .typautobus-item {
flex: 0 0 100%;
max-width: 100%;
}
.typautobus-grid h3 {
margin-bottom: 16px;
}
}