.tariffs__grid-wrap {
position: relative;
padding: 80px 0;
margin: 100px 0;
width: 100%;
}
.tariffs__grid-wrap .service__badge {
background-color: var(--white-color);
}
.tariffs__grid-wrap .service__page-content-subtitle {
color: var(--gray-color-second);
}
.tariffs__grid-wrap::after {
content: "";
position: absolute;
top: 0;
left: calc(
-1 *
(
max(
0px,
calc(
(
100vw - var(--container-max-width) - 2 *
var(--content-padding)
) /
2
)
) +
var(--content-padding)
)
);
width: 100vw;
height: 100%;
background-color: var(--blue-white-color);
border-radius: 80px;
z-index: -1;
}
.tariffs__grid-inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
margin-bottom: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
align-items: center;
}
.tariff__grid-card {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--white-color);
border-radius: 32px;
}
.tariff__grid-card-badge {
position: absolute;
padding: 6.4px 16px;
top: -14.5px;
left: 50%;
transform: translateX(-50%);
width: max-content;
font-family: "Unbounded", sans-serif;
font-size: clamp(
12px,
calc(12px + (13 - 12) * (100cqw - 1280px) / (1600 - 1280)),
13px
);
line-height: 128%;
font-weight: 500;
background-color: var(--pink-color);
color: var(--white-color);
border-radius: 12px;
}
.tariff__grid-card.white,
.tariff__grid-card.gray {
min-height: 93.5%;
}
.tariff__grid-card.gray {
border: 1px solid var(--white-color);
background-color: var(--blue-white-color);
}
.tariff__grid-card.blue {
background-color: var(--blue-color);
color: var(--white-color);
}
.tariff__grid-card-top {
padding: clamp(
24px,
calc(24px + (28 - 24) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
padding-bottom: clamp(
20px,
calc(20px + (28 - 20) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
display: flex;
flex-direction: column;
gap: clamp(
12px,
calc(12px + (18 - 12) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
}
.tariff__grid-card-type {
padding: 6px 12px;
background-color: var(--blue-white-color);
font-size: clamp(
14px,
calc(14px + (15 - 14) * (100cqw - 1280px) / (1600 - 1280)),
15px
);
line-height: 128%;
border-radius: 16px;
width: fit-content;
height: fit-content;
}
.tariff__grid-card.blue .tariff__grid-card-type {
background-color: #6182d5;
font-weight: 700;
}
.tariff__grid-card-title {
font-family: "Unbounded", sans-serif;
font-size: clamp(
18px,
calc(18px + (19 - 18) * (100cqw - 1280px) / (1600 - 1280)),
19px
);
line-height: 138%;
font-weight: 600;
}
.tariff__grid-card.blue .tariff__grid-card-title {
font-size: clamp(
19px,
calc(19px + (21 - 19) * (100cqw - 1280px) / (1600 - 1280)),
21px
);
line-height: 132%;
}
.tariff__grid-card-price-wrap {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: clamp(
8px,
calc(8px + (12 - 8) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
flex-wrap: wrap;
}
.tariff__grid-card-price-pre {
font-size: clamp(
17px,
calc(17px + (18 - 17) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 140%;
color: #4d4c56;
}
.tariff__grid-card.blue .tariff__grid-card-price-pre {
color: var(--blue-white-color);
line-height: 195%;
}
.tariff__grid-card-price {
font-family: "Unbounded";
font-size: clamp(
19px,
calc(19px + (22 - 19) * (100cqw - 1280px) / (1600 - 1280)),
22px
);
font-weight: 600;
line-height: 130%;
color: var(--black-color);
}
.tariff__grid-card.blue .tariff__grid-card-price {
font-size: clamp(
32px,
calc(32px + (38 - 32) * (100cqw - 1280px) / (1600 - 1280)),
38px
);
line-height: 140%;
color: var(--white-color);
}
.tariff__grid-card-desc {
font-size: clamp(
14px,
calc(14px + (15 - 14) * (100cqw - 1280px) / (1600 - 1280)),
15px
);
line-height: 152%;
color: #4d4c56;
}
.tariff__grid-card.blue .tariff__grid-card-desc {
color: var(--blue-white-color);
}
.tariff__grid-card-bot {
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(
20px,
calc(20px + (24 - 20) * (100cqw - 1280px) / (1600 - 1280)),
24px
)
clamp(
24px,
calc(24px + (28 - 24) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
border-top: 1px solid var(--blue-white-color);
}
.tariff__grid-card-bot *:last-child {
margin-bottom: 0;
}
.tariff__grid-card.gray .tariff__grid-card-bot {
border-color: var(--white-color);
}
.tariff__grid-card.blue .tariff__grid-card-bot {
border-color: #4b71cf;
padding: clamp(
20px,
calc(20px + (28 - 20) * (100cqw - 1280px) / (1600 - 1280)),
28px
)
clamp(
24px,
calc(24px + (28 - 24) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
padding-bottom: clamp(
18px,
calc(18px + (26 - 18) * (100cqw - 1280px) / (1600 - 1280)),
26px
);
}
.tariff__grid-card-list.tariff__grid-card-list {
display: flex;
flex-direction: column;
gap: 12px;
list-style: none;
padding-inline-start: 0;
font-size: clamp(
16px,
calc(16px + (17 - 16) * (100cqw - 1280px) / (1600 - 1280)),
17px
);
line-height: 135%;
margin-bottom: 24px;
}
.tariff__grid-card-list.tariff__grid-card-list > li.tariff__grid-card-list-item {
position: relative;
padding-left: clamp(
26px,
calc(26px + (28 - 26) * (100cqw - 1280px) / (1600 - 1280)),
28px
);
}
.tariff__grid-card-bot li.tariff__grid-card-list-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: clamp(
18px,
calc(18px + (20 - 18) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
height: clamp(
18px,
calc(18px + (20 - 18) * (100cqw - 1280px) / (1600 - 1280)),
20px
);
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/ok-circle-blue2.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.tariff__grid-card-bot li.tariff__grid-card-list-item.minus::before {
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/minus-circle.svg) !important;
}
.tariff__grid-card.blue li.tariff__grid-card-list-item::before {
background-image: url(//almond-medical.ru/wp-content/themes/amclinic/assets/svg/ok-circle-white2.svg);
}
.tariff__grid-card-action {
padding: 18px;
font-family: "Unbounded", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 142%;
color: var(--white-color);
background-color: var(--pink-color);
width: 100%;
text-align: center;
cursor: pointer;
border-radius: 21px;
transition: var(--transition);
margin-top: auto;
margin-bottom: 12px;
}
.tariff__grid-card-action:hover {
box-shadow: 0 0 20px var(--pink-color);
}
.tariff__grid-card-quote {
text-align: center;
font-size: clamp(
14px,
calc(14px + (15 - 14) * (100cqw - 1280px) / (1600 - 1280)),
15px
);
line-height: 140%;
color: #4d4c56;
}
.tariff__grid-card.blue .tariff__grid-card-quote {
color: var(--blue-white-color);
}
.tariffs__grid-bot-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
}
.tariffs__grid-bot-full {
grid-column: 1/-1;
padding: clamp(
24px,
calc(24px + (30 - 24) * (100cqw - 1280px) / (1600 - 1280)),
30px
)
clamp(
28px,
calc(28px + (32 - 28) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
display: flex;
flex-direction: column;
gap: clamp(
20px,
calc(20px + (24 - 20) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
border-radius: 30px;
border: 1px solid #9ba4ba;
}
.tariffs__grid-bot-full-title {
font-family: "Unbounded", sans-serif;
font-weight: 600;
font-size: clamp(
21px,
calc(21px + (24 - 21) * (100cqw - 1280px) / (1600 - 1280)),
24px
);
line-height: 128%;
}
.tariffs__grid-bot-full-list {
font-size: clamp(
17px,
calc(17px + (18 - 17) * (100cqw - 1280px) / (1600 - 1280)),
18px
);
line-height: 130%;
}
.tariffs__grid-bot-full-list.tariffs__grid-bot-full-list ul {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
row-gap: clamp(
10px,
calc(10px + (12 - 10) * (100cqw - 1280px) / (1600 - 1280)),
12px
);
list-style: none;
padding: 0;
margin: 0;
}
.tariffs__grid-bot-full-list.tariffs__grid-bot-full-list ul > li {
position: relative;
padding-left: clamp(
20px,
calc(20px + (30 - 20) * (100cqw - 1280px) / (1600 - 1280)),
30px
);
}
.tariffs__grid-bot-full-list.tariffs__grid-bot-full-list ul > li::before {
content: "";
position: absolute;
top: 5px;
left: 2px;
transform: rotate(45deg);
width: clamp(
8px,
calc(8px + (10 - 8) * (100cqw - 1280px) / (1600 - 1280)),
10px
);
height: clamp(
8px,
calc(8px + (10 - 8) * (100cqw - 1280px) / (1600 - 1280)),
10px
);
background-color: var(--blue-color);
}
.tariffs__grid-bot-white,
.tariffs__grid-bot-pink {
display: flex;
flex-direction: column;
padding: clamp(
22px,
calc(22px + (28 - 22) * (100cqw - 1280px) / (1600 - 1280)),
28px
)
clamp(
26px,
calc(26px + (32 - 26) * (100cqw - 1280px) / (1600 - 1280)),
32px
);
border-radius: 32px;
}
.tariffs__grid-bot-white {
background-color: var(--white-color);
gap: 12px;
}
.tariffs__grid-bot-pink {
position: relative;
background-color: var(--pink-white-color);
}
.tariffs__grid-bot-pink-inner {
position: relative;
padding-left: clamp(
88px,
calc(88px + (94 - 88) * (100cqw - 1280px) / (1600 - 1280)),
94px
);
display: flex;
flex-direction: column;
row-gap: clamp(
12px,
calc(12px + (16 - 12) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
}
.tariffs__grid-bot-white-title,
.tariffs__grid-bot-pink-title {
font-family: "Unbounded", sans-serif;
font-size: clamp(
19px,
calc(19px + (21 - 19) * (100cqw - 1280px) / (1600 - 1280)),
21px
);
font-weight: 600;
line-height: 133%;
}
.tariffs__grid-bot-white-text,
.tariffs__grid-bot-pink-text {
font-size: clamp(
14px,
calc(14px + (15 - 14) * (100cqw - 1280px) / (1600 - 1280)),
15px
);
line-height: 140%;
}
.tariffs__grid-bot-white-text {
color: #4d4c56;
}
.tariffs__grid-bot-action {
padding: 14px 27px;
font-family: "Unbounded", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 142%;
width: fit-content;
border: 2px solid var(--blue-white-color);
border-radius: 21px;
color: var(--blue-color);
transition: var(--transition);
}
.tariffs__grid-bot-white .tariffs__grid-bot-action {
margin-top: auto;
}
.tariffs__grid-bot-white .tariffs__grid-bot-action:hover {
background-color: var(--blue-color);
color: var(--white-color);
}
.tariffs__grid-bot-pink .tariffs__grid-bot-action {
padding: 15px 28px;
border: 1px solid var(--pink-color);
color: var(--pink-color);
}
.tariffs__grid-bot-pink .tariffs__grid-bot-action:hover {
background-color: var(--pink-color);
color: var(--white-color);
}
.tariffs__grid-bot-pink-img {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
object-fit: contain;
}
.tariffs__grid-bot-pink-text {
color: var(--gray-color);
}
.tariffs__grid-bot-pink-uptitle {
color: #a498a2;
font-size: clamp(
15px,
calc(15px + (16 - 15) * (100cqw - 1280px) / (1600 - 1280)),
16px
);
line-height: 140%;
margin-bottom: 3px;
}
.tariff__grid-card-opener {
display: none;
}
@media (max-width: 992px) {
.tariffs__grid-wrap {
position: relative;
padding: 40px 0;
margin: 60px 0;
width: 100%;
}
.tariffs__grid-wrap::after {
border-radius: 60px;
}
.tariffs__grid-inner {
gap: 20px;
grid-template-columns: 1fr 1fr;
align-items: start;
}
.tariff__grid-card:nth-child(2) {
order: 1;
grid-row: 1 / 3;
}
.tariff__grid-card:nth-child(1) {
order: 2;
}
.tariff__grid-card:nth-child(3) {
order: 3;
}
.tariff__grid-card-top {
padding: 18px 20px 14px 20px;
gap: 10px;
}
.tariff__grid-card-title {
word-break: break-word;
}
.tariff__grid-card.blue .tariff__grid-card-top {
gap: 12px;
}
.tariff__grid-card-title {
font-size: 16px;
}
.tariff__grid-card.blue .tariff__grid-card-title {
font-size: 18px;
}
.tariff__grid-card.blue {
font-size: 18px;
}
.tariff__grid-card-price {
font-size: 17px;
}
.tariff__grid-card.blue .tariff__grid-card-price {
font-size: 24px;
}
.tariff__grid-card-bot {
padding: 18px 20px;
}
.tariff__grid-card.blue .tariff__grid-card-bot {
padding-bottom: 16px;
}
.tariff__grid-card-list.tariff__grid-card-list {
font-size: 14px;
margin-bottom: 20px;
gap: 10px;
}
.tariff__grid-card.blue .tariff__grid-card-list {
margin-bottom: 14px;
}
.tariff__grid-card-list.tariff__grid-card-list > li.tariff__grid-card-list-item {
padding-left: 22px;
}
.tariff__grid-card.blue
.tariff__grid-card-list.tariff__grid-card-list
> li.tariff__grid-card-list-item {
padding-left: 26px;
}
li.tariff__grid-card-list-item::before {
width: 16px;
height: 16px;
}
.tariff__grid-card.blue li.tariff__grid-card-list-item::before {
width: 18px;
height: 18px;
}
.tariff__grid-card.blue .tariff__grid-card-list {
font-size: 15px;
}
.tariff__grid-card-action {
padding: 16px;
margin-bottom: 12px;
font-size: 14px;
}
.tariff__grid-card.blue .tariff__grid-card-list li:nth-child(n + 5) {
display: none;
}
.tariff__grid-card.blue.opened .tariff__grid-card-list li:nth-child(n + 5) {
display: block;
}
.tariff__grid-card-opener {
position: relative;
padding-right: 20px;
display: block;
margin-bottom: 20px;
cursor: pointer;
font-family: "Unbounded", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 133%;
width: fit-content;
}
.tariff__grid-card-opener::after {
content: "";
position: absolute;
top: 50%;
right: 0;
display: block;
width: 12px;
height: 12px;
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(--white-color);
transform: translateY(-50%) rotate(90deg);
}
.tariff__grid-card.blue.opened .tariff__grid-card-opener {
display: none;
}
.tariffs__grid-bot-full {
gap: 16px;
}
.tariffs__grid-bot-full-title {
font-size: 19px;
}
.tariffs__grid-bot-full-list.tariffs__grid-bot-full-list ul {
font-size: 16px;
grid-template-columns: 1fr;
gap: 10px;
}
.tariffs__grid-bot-white,
.tariffs__grid-bot-pink {
padding: 20px 24px;
}
.tariffs__grid-bot-white-title,
.tariffs__grid-bot-pink-title {
font-size: 18px;
}
.tariffs__grid-bot-white-text,
.tariffs__grid-bot-pink-text {
font-size: 14px;
}
.tariffs__grid-bot-pink-inner {
padding-top: 60px;
padding-left: 0;
}
.tariffs__grid-bot-pink-img {
width: 46px;
height: 46px;
}
}
@media (max-width: 650px) {
.tariffs__grid-inner {
gap: 5px;
}
.tariff__grid-card:nth-child(2) {
grid-column: 1 / 3;
}
.tariff__grid-card-type {
padding: 2px 8px;
font-size: 12px;
border-radius: 60px;
}
.tariff__grid-card.blue .tariff__grid-card-type {
font-size: 14px;
}
.tariff__grid-card-top {
padding: 18px 15px 14px 15px;
}
.tariff__grid-card.blue .tariff__grid-card-top {
padding: 28px 20px 14px 20px;
}
.tariff__grid-card-title {
font-size: 16px;
}
.tariff__grid-card-bot {
padding: 18px 10px;
}
.tariff__grid-card.blue .tariff__grid-card-bot {
padding: 18px 20px 16px 20px;
}
.tariffs__grid-bot-wrap {
grid-template-columns: 1fr;
}
.tariffs__grid-bot-full {
padding: 20px 24px;
}
.tariffs__grid-bot-white .tariffs__grid-bot-action {
margin-top: 4px;
}
}
@media (max-width: 379px) {
.tariffs__grid-inner {
display: flex;
flex-direction: column;
gap: 5px;
}
}