.service__page-service-architecture-tabs {
margin-bottom: 12px;
}
.service__page-service-architecture-tabs-slider .swiper-slide {
width: auto !important;
}
.service__page-service-architecture-btn {
padding: clamp(
9px,
calc(9px + (11 - 9) * (100cqw - 1280px) / (1600 - 1280)),
11px
)
clamp(
15px,
calc(15px + (19 - 15) * (100cqw - 1280px) / (1600 - 1280)),
19px
);
border-radius: 12px;
border: 1px solid var(--blue-white-color);
color: var(--black-color);
font-size: 15px;
line-height: 140%;
cursor: pointer;
}
.service__page-service-architecture-tabs
.swiper-slide-thumb-active
.service__page-service-architecture-btn {
background-color: var(--blue-color);
color: var(--white-color);
font-weight: 700;
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
}
.service__page-service-architecture-slider-wrap {
position: relative;
overflow: hidden;
background-color: var(--blue-white-color);
border-radius: 30px;
}
.service__page-service-architecture-slide-card {
padding: clamp(24px, calc(24px + (30 - 24) * (100cqw - 1280px) / (1600 - 1280)), 30px);
display: grid;
grid-template-columns: 44fr 46fr;
gap: clamp(
20px,
calc(20px + (40 - 20) * (100cqw - 1280px) / (1600 - 1280)),
40px
);
}
.service__page-service-architecture-slide-img-wrap {
background-color: var(--white-color);
height: clamp(
355px,
calc(355px + (450 - 355) * (100cqw - 1280px) / (1600 - 1280)),
450px
);
border-radius: 12px;
overflow: hidden;
}
.service__page-service-architecture-slide-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service__page-service-architecture-slide-content {
padding-top: clamp(10px, calc(10px + (20 - 10) * (100cqw - 1280px) / (1600 - 1280)), 20px);
display: flex;
flex-direction: column;
gap: clamp(16px, calc(16px + (24 - 16) * (100cqw - 1280px) / (1600 - 1280)), 24px);
}
.service__page-service-architecture-slide-title {
font-family: "Unbounded", sans-serif;
font-size: clamp(
22px,
calc(22px + (24 - 22) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
font-weight: 600;
line-height: 126%;
}
.service__page-service-architecture-slide-body {
display: flex;
flex-direction: column;
gap: clamp(
12px,
calc(12px + (16 - 12) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
}
.service__page-service-architecture-slide-body-item {
display: flex;
flex-direction: column;
gap: clamp(
12px,
calc(12px + (16 - 12) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
overflow: hidden;
} .service__page-service-architecture-slide-body-item.now {
background-color: var(--white-color);
}
.service__page-service-architecture-slide-body-item-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: var(--blue-white-color-second);
font-family: "Unbounded", sans-serif;
font-size: clamp(
19px,
calc(19px + (21 - 19) * (100cqw - 1280px) / (1600 - 1280)),
21px
);
font-weight: 600;
line-height: 152%;
}
.service__page-service-architecture-slide-body-item-title::after {
content: "";
display: block;
width: clamp(
25px,
calc(25px + (28.3 - 25) * (100cqw - 1280px) / (1600 - 1280)),
28.3px
);
height: clamp(
25px,
calc(25px + (28.3 - 25) * (100cqw - 1280px) / (1600 - 1280)),
28.3px
);
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/x-circle.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: scale(1.2);
}
.service__page-service-architecture-slide-body-item.now
.service__page-service-architecture-slide-body-item-title {
flex-direction: row-reverse;
}
.service__page-service-architecture-slide-body-item.now
.service__page-service-architecture-slide-body-item-title::after {
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/dark-blue-yes.svg);
transform: scale(1);
}
.service__page-service-architecture-slide-body-item-title > span {
opacity: 0.6;
}
.service__page-service-architecture-slide-body-item-bot {
color: var(--gray-color-second);
font-size: clamp(
17px,
calc(17px + (18 - 17) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 140%;
}
.service__page-service-architecture-arrows {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 40px;
border-top: 1px solid var(--white-color);
padding: clamp(
12px,
calc(12px + (16 - 12) * (100cqw - 1280px) / (1600 - 1280)),
16px
)
clamp(
24px,
calc(24px + (30 - 24) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
}
.service__page-service-architecture-arr {
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
line-height: 140%;
cursor: pointer;
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
color: var(--black-color);
font-weight: 700;
text-transform: lowercase;
transition: var(--transition);
}
.service__page-service-architecture-arr.prev::before {
content: "";
display: block;
width: clamp(
22px,
calc(22px + (32 - 22) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
height: clamp(
22px,
calc(22px + (32 - 22) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
mask-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/arr-line-left.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--black-color);
transition: var(--transition);
}
.service__page-service-architecture-arr.next::after {
content: "";
display: block;
width: clamp(
22px,
calc(22px + (32 - 22) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
height: clamp(
22px,
calc(22px + (32 - 22) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
mask-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/arr-line-right.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background-color: var(--black-color);
transition: var(--transition);
}
.service__page-service-architecture-arr:hover {
color: var(--blue-color);
}
.service__page-service-architecture-arr:hover::before,
.service__page-service-architecture-arr:hover::after {
background-color: var(--blue-color);
}
.service__page-service-architecture-arr:hover::before {
transform: translateX(-5px);
}
.service__page-service-architecture-arr:hover::after {
transform: translateX(5px);
}
.service__page-service-architecture-arr.swiper-button-disabled {
opacity: 0.2;
pointer-events: none;
}
.service__page-service-architecture-pagination {
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(
8px,
calc(8px + (12 - 8) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
width: fit-content !important;
}
.service__page-service-architecture-pagination .swiper-pagination-bullet {
width: clamp(
6px,
calc(6px + (8 - 6) * (100cqw - 1280px) / (1600 - 1280)),
8px
);
height: clamp(
6px,
calc(6px + (8 - 6) * (100cqw - 1280px) / (1600 - 1280)),
8px
);
background-color: #b2b1b6;
border-radius: 100%;
opacity: 1;
transition: var(--transition);
}
.service__page-service-architecture-pagination .swiper-pagination-bullet:hover {
transform: scale(1.3);
}
.service__page-service-architecture-pagination
.swiper-pagination-bullet-active {
background-color: var(--blue-color);
pointer-events: none;
}
@media(max-width: 1366px) {
.service__page-service-architecture-slide-card {
grid-template-columns: 1fr 1fr;
}
.service__page-service-architecture-slide-title {
line-height: 133%;
}
.service__page-service-architecture-slide-body-item-bot {
line-height: 135%;
}
}
@media(max-width: 992px) {
.service__page-service-architecture-btn {
padding: 10px 15px;
font-size: 14px;
line-height: 140%;
}
.service__page-service-architecture-slide-card {
grid-template-columns: 1fr 1fr;
padding: 20px 20px;
gap: 20px;
}
.service__page-service-architecture-tabs .swiper-slide-thumb-active .service__page-service-architecture-btn {
font-size: 14px;
}
.service__page-service-architecture-slide-img-wrap {
height: 312px;
}
.service__page-service-architecture-slide-content {
gap: 12px;
}
.service__page-service-architecture-slide-title {
font-size: 19px;
line-height: 140%;
}
.service__page-service-architecture-slide-body-item-title {
font-size: 17px;
line-height: 146%;
}
.service__page-service-architecture-slide-body-item-bot {
font-size: 16px;
line-height: 137%;
}
.service__page-service-architecture-slide-body-item-title::after {
width: 21px;
height: 21px;
}
}
@media(max-width: 650px) {
.service__page-service-architecture-slide-card {
grid-template-columns: 1fr;
gap: 20px;
}
.service__page-service-architecture-slide-img-wrap {
height: 298px;
}
.service__page-service-architecture-slide-content {
padding-top: 0;
}
}