.iv-card-price {
--iv-card-price-ink:
var(
--iv-color-text,
#334155
);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
width: 100%;
min-width: 0;
max-width: 100%;
min-height: 0;
margin:
3px
0
6px;
padding: 0;
color:
var(
--iv-card-price-ink
);
font-family:
var(
--iv-font-primary,
Inter,
Arial,
sans-serif
);
text-align: left;
container-type: inline-size;
}
.iv-card-price *,
.iv-card-price *::before,
.iv-card-price *::after {
box-sizing: border-box;
}
.iv-card-price__base {
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
color: inherit;
}
.iv-card-price__base .ivpp4-price {
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
color: inherit;
}
.iv-card-price__base .ivpp4-price__main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap:
3px
5px;
width: 100%;
min-width: 0;
max-width: 100%;
color: inherit;
line-height: 1.12;
}
.iv-card-price__base .ivpp4-price__amount {
color: inherit;
font-size: 17px;
font-weight:
var(
--iv-font-weight-bold,
700
);
line-height: 1.05;
letter-spacing: -0.025em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.iv-card-price__base :is(
.ivpp4-price__prefix,
.ivpp4-price__separator,
.ivpp4-price__currency,
.ivpp4-price__period
) {
color: inherit;
font-size: 12px;
font-weight:
var(
--iv-font-weight-medium,
500
);
line-height: 1.2;
white-space: nowrap;
opacity: 0.66;
}
.iv-card-price__base .ivpp4-price__currency {
font-size: 11.5px;
font-weight:
var(
--iv-font-weight-semibold,
600
);
letter-spacing: 0.01em;
opacity: 0.68;
}
.iv-card-price__base .ivpp4-price__separator {
opacity: 0.58;
}
.iv-card-price__maintenance {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap:
3px
5px;
width: 100%;
min-width: 0;
max-width: 100%;
color: inherit;
font-size: 12px;
line-height: 1.25;
}
.iv-card-price__maintenance-label {
color: inherit;
font-weight:
var(
--iv-font-weight-medium,
500
);
opacity: 0.64;
white-space: nowrap;
}
.iv-card-price__maintenance-value {
color: inherit;
font-weight:
var(
--iv-font-weight-bold,
700
);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.iv-card-price__metrics {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap:
3px
7px;
width: 100%;
min-width: 0;
max-width: 100%;
color: inherit;
font-size: 12px;
line-height: 1.25;
}
.iv-card-price__metric {
display: inline-flex;
align-items: baseline;
gap: 0;
min-width: 0;
max-width: 100%;
color: inherit;
white-space: nowrap;
}
.iv-card-price__metric
+ .iv-card-price__metric::before {
content: "\00B7";
display: inline-block;
margin-right: 7px;
color: inherit;
font-weight:
var(
--iv-font-weight-regular,
400
);
opacity: 0.50;
}
.iv-card-price__metric-value {
color: inherit;
font-weight:
var(
--iv-font-weight-bold,
700
);
font-variant-numeric: tabular-nums;
}
.iv-card-price__metric-unit {
color: inherit;
font-weight:
var(
--iv-font-weight-medium,
500
);
opacity: 0.68;
}
@container (max-width: 285px) {
.iv-card-price {
gap: 4px;
margin-bottom: 5px;
}
.iv-card-price__base .ivpp4-price__amount {
font-size: 16px;
}
.iv-card-price__base :is(
.ivpp4-price__prefix,
.ivpp4-price__separator,
.ivpp4-price__currency,
.ivpp4-price__period
),
.iv-card-price__maintenance,
.iv-card-price__metrics {
font-size: 11.5px;
}
.iv-card-price__metrics {
gap:
4px
10px;
}
}
@supports not (container-type: inline-size) {
@media (max-width: 767px) {
.iv-card-price__base .ivpp4-price__amount {
font-size: 16px;
}
}
}