.component_content_4 {
display: flex;
}
.component_content_4 > .container {
z-index: 2;
}
.component_content_4 .component__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
}
.component_content_4 .component__link {
width: fit-content;
min-width: 220px;
flex-shrink: 0;
}
.component_content_4 .component__title {
padding-right: 15px;
line-height: 120%;
}
.component_content_4 .component__title.style_1 {
color: var(--color-dark);
font-family: var(--font-1_Bold);
font-size: 48px;
line-height: 100%;
}
@media (max-width: 1199px) {
.component_content_4 .component__head {
margin-bottom: calc(0.0227272727 * 100vw + 12.7272727273px);
}
.component_content_4 .component__title.style_1 {
font-size: calc(0.0181818182 * 100vw + 26.1818181818px);
}
}
@media (max-width: 767px) {
.component_content_4 .component__title {
text-align: center;
padding-right: 0px;
}
.component_content_4 .component__head.type_1 {
flex-direction: column;
}
.component_content_4 .component__head.type_2 {
flex-direction: column;
justify-content: center;
}
.component_content_4 .component__link {
margin-top: 15px;
}
}
.component_content_4 .component__gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
}
.component_content_4 .component__gallery img {
width: 100%;
height: 100%;
}
.component_content_4 .component__slider {
margin-bottom: 30px;
}
.component_content_4 .component__link {
width: fit-content;
min-width: 230px;
margin: 0 auto;
}
.component_content_4 .navigation {
padding: 15px;
width: 50px;
height: 50px;
}
.component_content_4 .navigation.prev {
cursor: pointer;
border-radius: 50%;
background-color: var(--color-light);
border: 1px solid var(--color-primary);
transition: background-color ease 200ms, transform ease 200ms;
}
.component_content_4 .navigation.prev:hover {
transform: scale(1.15);
}
.component_content_4 .navigation.prev:before {
content: "";
display: flex;
filter: var(--color-primary--filter);
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.5 9H1.5M1.5 9L9.5 1M1.5 9L9.5 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg>');
background-size: 100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.component_content_4 .navigation.next {
cursor: pointer;
border-radius: 50%;
background-color: var(--color-light);
border: 1px solid var(--color-primary);
transition: background-color ease 200ms, transform ease 200ms;
background-color: var(--color-primary);
border: none;
}
.component_content_4 .navigation.next:hover {
transform: scale(1.15);
}
.component_content_4 .navigation.next:before {
content: "";
display: flex;
filter: var(--color-primary--filter);
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.5 9H1.5M1.5 9L9.5 1M1.5 9L9.5 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg>');
background-size: 100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.component_content_4 .navigation.next:before {
filter: var(--color-light--filter);
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 9H20.5M20.5 9L12.5 1M20.5 9L12.5 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.component_content_4 .navigation_2.prev {
cursor: pointer;
border-radius: 5px;
width: 44px;
height: 44px;
background-color: var(--color-primary);
transition: background-color ease 200ms, transform ease 200ms;
}
.component_content_4 .navigation_2.prev:hover {
transform: scale(1.1);
}
.component_content_4 .navigation_2.prev:before {
content: "";
display: flex;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15L1 8L8 1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
background-size: 10px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.component_content_4 .navigation_2.next {
cursor: pointer;
border-radius: 5px;
width: 44px;
height: 44px;
background-color: var(--color-primary);
transition: background-color ease 200ms, transform ease 200ms;
}
.component_content_4 .navigation_2.next:hover {
transform: scale(1.1);
}
.component_content_4 .navigation_2.next:before {
content: "";
display: flex;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15L1 8L8 1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
background-size: 10px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.component_content_4 .navigation_2.next:before {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 1L8 8L1 15" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>');
}
.component_content_4 .pagination {
outline: 1px solid var(--color-primary);
border: 4px solid var(--color-light);
background-color: var(--color-light);
margin: 0px;
width: 20px;
height: 20px;
opacity: 1;
transition: background-color ease-in-out 200ms;
}
.component_content_4 .pagination.swiper-pagination-bullet-active {
background-color: var(--color-primary);
}
.component_content_4 .pagination:hover {
background-color: var(--color-primary);
}
.component_content_4 .progress {
position: relative;
display: block;
z-index: 1;
height: 2px;
}
.component_content_4 .progress .progress__line {
height: 2px;
background: cl(text);
width: auto;
clear: both;
opacity: 0;
bottom: 45px;
left: 0;
right: 0;
}
.component_content_4 .progress .progress__line:after {
position: absolute;
top: 0;
left: 0;
background: cl(light);
height: 100%;
width: 0;
content: "";
transition: 0.1s width linear;
}
.component_content_4 .progress.active .progress__line {
opacity: 1;
}
.component_content_4 .progress.animate .progress__line:after {
transition: width linear;
transition-delay: unset;
width: 100%;
transition-duration: 5s;
}
.component_content_4 .fraction {
display: grid;
grid-auto-flow: column;
grid-column-gap: 3px;
color: cl(text);
width: fit-content;
}
.component_content_4 .fraction .swiper-pagination-current {
font-size: 20px;
color: cl(light);
}
.component_content_4 .fraction .swiper-pagination-total {
font-size: 14px;
}
.component_content_4 .swiper-slide-thumb-active {
border: 1px solid cl(primary);
}
.component_content_4 .slider .swiper {
padding: 30px 30px;
margin: -30px -30px;
width: calc(100% + 60px);
}
.component_content_4 .slider__navigation {
display: grid;
grid-column-gap: 20px;
grid-auto-flow: column;
}
@media (max-width: 575px) {
.component_content_4 .slider__navigation {
grid-auto-flow: row;
grid-row-gap: 10px;
}
.component_content_4 .navigation {
padding: 10px;
width: 35px;
height: 35px;
}
}
.component_content_4 .slider__pagination {
margin: auto;
width: fit-content;
margin-bottom: 30px;
}
.component_content_4 .card {
border-radius: 15px;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
background-color: var(--color-light);
padding: 30px;
display: grid;
grid-template-columns: 570px 1fr;
grid-gap: 30px;
align-items: flex-start;
}
.component_content_4 .card__gallery {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(3, 1fr);
max-width: fit-content;
}
.component_content_4 .card__gallery a {
overflow: hidden;
border-radius: 15px;
position: relative;
}
.component_content_4 .card__gallery a:hover::before {
background-color: rgba(var(--color-primary--rgb), 0.8);
}
.component_content_4 .card__gallery a:hover::after {
opacity: 1;
}
.component_content_4 .card__gallery a::before {
content: "";
z-index: 1;
transition: background-color ease-in-out 400ms;
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
}
.component_content_4 .card__gallery a::after {
filter: var(--color-light--filter);
content: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.3443 0.175293C10.0512 0.175293 0.896362 9.62373 0.896362 21.279C0.896362 32.9342 10.0512 42.3827 21.3443 42.3827C32.6373 42.3827 41.7922 32.9342 41.7922 21.279C41.7922 9.62373 32.6373 0.175293 21.3443 0.175293ZM4.0422 21.279C4.0422 11.4168 11.7886 3.42201 21.3443 3.42201C30.8999 3.42201 38.6464 11.4168 38.6464 21.279C38.6464 31.1411 30.8999 39.1359 21.3443 39.1359C11.7886 39.1359 4.0422 31.1411 4.0422 21.279Z" fill="black" /><path d="M39.2344 37.4471C38.6202 36.8132 37.6242 36.8132 37.01 37.4471C36.3957 38.0811 36.3957 39.1089 37.01 39.7429L45.3986 48.4007C46.0129 49.0347 47.0088 49.0347 47.6231 48.4007C48.2373 47.7668 48.2373 46.7389 47.6231 46.1049L39.2344 37.4471Z" fill="black" /> </svg>');
transition: opacity ease-in-out 400ms;
position: absolute;
width: 50px;
height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
opacity: 0;
z-index: 5;
}
.component_content_4 .card__gallery img {
object-fit: cover;
width: 100%;
height: 100%;
}
.component_content_4 .card__gallery > *:first-child {
grid-column: auto/span 3;
}
.component_content_4 .card__content {
display: grid;
grid-auto-rows: min-content;
grid-row-gap: 15px;
}
.component_content_4 .card__content * {
line-height: 150%;
color: var(--color-dark);
}
.component_content_4 .card__content strong {
font-family: var(--font-1_Black);
}
.component_content_4 .card__content ul {
display: grid;
grid-row-gap: 10px;
}
.component_content_4 .card__content ul li {
display: flex;
}
.component_content_4 .card__content ul li {
display: flex;
line-height: 135%;
}
.component_content_4 .card__content ul li:hover:before {
background-color: var(--color-hover);
}
.component_content_4 .card__content ul li:before {
content: "";
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 4.29167L3.33333 6.625L8 1.375" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg>');
background-repeat: no-repeat;
background-size: 9px;
background-position: center;
width: 20px;
height: 20px;
flex-shrink: 0;
transition: background-color ease 400ms;
border-radius: 50%;
background-color: var(--color-primary);
margin-right: 12px;
}
.component_content_4 .card__content ol {
display: grid;
grid-row-gap: 10px;
counter-reset: num;
}
.component_content_4 .card__content ol li {
display: flex;
}
.component_content_4 .card__content ol li:before {
content: counter(num) ".";
counter-increment: num;
margin-right: 10px;
}
.component_content_4 .card__content hr {
height: 2px;
background-color: var(--color-light);
}
.component_content_4 .card__content em {
display: contents;
}
.component_content_4 .card__content h1 {
line-height: 100%;
margin-top: 15px;
margin-bottom: 15px;
color: var(--color-dark);
}
.component_content_4 .card__content h2 {
line-height: 100%;
margin-top: 15px;
margin-bottom: 15px;
color: var(--color-dark);
}
.component_content_4 .card__content h3 {
line-height: 100%;
margin-top: 15px;
margin-bottom: 15px;
color: var(--color-dark);
}
.component_content_4 .card__content h4 {
line-height: 100%;
margin-top: 15px;
margin-bottom: 15px;
color: var(--color-dark);
}
.component_content_4 .card__content h5 {
line-height: 100%;
margin-top: 15px;
margin-bottom: 15px;
color: var(--color-dark);
}
.component_content_4 .card__content h6 {
line-height: 100%;
margin-top: 15px;
margin-bottom: 15px;
color: var(--color-dark);
}
@media (max-width: 1199px) {
.component_content_4 .card__content h1 {
margin-top: 0;
margin-bottom: 0;
}
.component_content_4 .card__content h2 {
margin-top: 0;
margin-bottom: 0;
}
.component_content_4 .card__content h3 {
margin-top: 0;
margin-bottom: 0;
}
.component_content_4 .card__content h4 {
margin-top: 0;
margin-bottom: 0;
}
.component_content_4 .card__content h5 {
margin-top: 0;
margin-bottom: 0;
}
.component_content_4 .card__content h6 {
margin-top: 0;
margin-bottom: 0;
}
}
.component_content_4 .card__content strong {
color: var(--color-primary);
}
@media (max-width: 1199px) {
.component_content_4 .card {
grid-template-columns: 100%;
justify-items: center;
padding: calc(0.0170454545 * 100vw + 9.5454545455px);
}
.component_content_4 .card .card__gallery {
grid-gap: calc(0.0227272727 * 100vw + 2.7272727273px);
}
}