:root {
--cf-container-width: 1200px;
}
.cf-full {
background-color: var(--cf-color-background);
color: var(--cf-color-foreground);
padding: 24px 1rem 32px;
font-size: 16px;
container-type: inline-size;
container-name: cf-full;
}
.cf-full p:empty {
display: none;
} .cf-full__minimal-fallback {
display: none;
}
.cf-full__header {
max-width: var(--cf-container-width);
margin: 0 auto;
margin-bottom: 20px;
}
.cf-full__intro {
font-size: 32px;
font-weight: bold;
}   @container cf-full (max-width: 1024px) {
.cf-full__row,
.cf-full__header,
.cf-full__cta {
display: none !important;
}
.cf-full__minimal-fallback {
display: block;
padding: 8px 16px;
font-size: 14px;
text-align: center;
}
}
.cf-full__row {
display: flex;
flex-wrap: wrap;
justify-content: start;
gap: 4px;
align-items: center;
height: 100%;
max-width: var(--cf-container-width);
margin: 0 auto;
}
.cf-full__col {
display: flex;
align-items: center;
height: 100%;
gap: 12px; width: calc(20% - 4px);
text-wrap: balance;
}
.cf-full__text { line-height: 1.1;
}
.cf-full__block {
display: block;
}
.cf-full__value {
font-weight: bold;
}
.cf-full__cta {
display: flex;
line-height: 1;
font-size: 14px;
gap: 8px;
}
.cf-full__cta-link {
display: flex;
align-items: center;
gap: 4px;
}
.cf-full__cta-icon {
height: 14px;
margin-bottom: 4px;
}
.cf-full__icon {
display: block;
width: auto;
height: 40px;
min-width: 32px;
flex-shrink: 0;
color: var(--cf-color-foreground);
fill: currentColor;
@media (min-width: 768px) {
height: 50px;
min-width: 40px;
}
}
.cf-minimal {
background-color: var(--cf-color-background);
color: var(--cf-color-foreground);
padding: 8px 0 16px;
font-size: 14px;
}
.cf-minimal__content {
display: flex;
justify-content: center;
text-align: center;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.cf-minimal__text {
font-size: 14px;
}
.cf-minimal__text a {
color: var(--cf-color-foreground);
}
.cf-minimal__value {
font-weight: bold;
}
.cf-minimal__link {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.cf-minimal__link:hover {
text-decoration: underline;
}
.cf-minimal__link-icon {
--icon-size: 24px;
width: var(--icon-size);
height: var(--icon-size);
}
.cf-sticker {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 300px;
color: var(--cf-color-foreground);
display: grid;
place-items: center;
justify-content: center;
font-size: 16px;
position: relative;
line-height: 1.2;
margin-left: auto;
}
.cf-sticker__cloud {
--icon-size: 100%;
width: var(--icon-size);
height: var(--icon-size);
position: absolute;
top: 0;
left: 0;
}
.cf-sticker__text {
text-wrap: balance;
position: relative;
z-index: 1;
text-align: center;
padding: 80px;
margin-left: 20px;
}
.cf-sticker__value {
font-weight: bold;
}
.cf-label {
background-color: var(--cf-color-background);
color: var(--cf-color-foreground);
border-radius: 99px;
padding: 4px 8px;
font-size: 12px;
display: inline-block;
}
.cf-label__value {
font-weight: bold;
}
.cf-label__link {
color: inherit;
text-decoration: underline;
display: inline-flex;
align-items: center;
}
.cf-label__link:hover {
color: inherit;
}
.cf-label__link-icon {
width: 16px;
}