:root{--card-bg-white:#fff;--card-padding:24px;--vds-space-6X:24px;--vds-size-border-radius-medium:16px}
.card-group-wrapper{display:flex;flex-direction:column;align-items:flex-start;padding:0 var(--vds-space-6X);gap:var(--vds-space-6X);margin:0 auto;width:100%;box-sizing:border-box;@media(min-width:768px) and (max-width:1023px){width:768px;min-width:768px;max-width:1023px}
@media(min-width:1024px){max-width:1232px;min-width:1024px}
}
.card-group-title{width:100%}
.card-group-title--left{display:flex;justify-content:flex-start}
.card-group-title--center{display:flex;justify-content:center}
.card-group-content-card-wrapper{display:flex;width:100%;flex-direction:row;gap:var(--vds-space-6X)}
.card-group-content-card-wrapper>*{flex:1}
@media(min-width:768px) and (max-width:1023px){.card-group-content-card-wrapper--cols-4{flex-wrap:wrap}
.card-group-content-card-wrapper--cols-4>*{flex:0 0 calc(50% - (var(--vds-space-6X) / 2));max-width:calc(50% - (var(--vds-space-6X) / 2))}
}
@media(max-width:767px){.card-group-content-card-wrapper--cols-4{flex-direction:column;gap:24px}
.card-group-content-card-wrapper--cols-4>*{flex:1 1 100%;max-width:100%}
}
@media(min-width:768px){.card-group-content-card-wrapper .content-card-wrapper .card-content{display:flex;flex-direction:column;height:100%}
.card-group-content-card-wrapper .content-card-wrapper .card-content.reverse-layout{flex-direction:column-reverse}
.card-group-content-card-wrapper .content-card-wrapper .card-content>div:last-child{display:flex;flex:1}
.card-group-content-card-wrapper .content-card-wrapper .card-text-content-wrapper{display:flex;flex:1;flex-direction:column;width:100%}
.card-group-content-card-wrapper .content-card-wrapper .card-text-content__content{flex:1}
.card-group-content-card-wrapper .content-card-wrapper .card-text-content__cta-group{margin-top:auto}
}
@media(max-width:767px){.card-group-wrapper{padding:0 16px}
.card-content{display:flex;flex-direction:column;gap:16px}
.card-group-content-card-wrapper{flex-direction:column;gap:16px}
.card-group-content-card-wrapper>*{flex:1 1 100%;max-width:100%;width:100%}
}
.content-card-wrapper{background-color:var(--card-bg-white);padding:var(--card-padding);box-sizing:border-box;display:flex;flex-direction:column;height:100%;position:relative}
.card-content-media{width:100%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.card-content-media:has(.card-content-foreground-image){height:240px}
.card-content-media:has(.card-content-pictogram){height:auto}
.card-content-media:has(.card-content-foreground-image) vvo-image,.card-content-media:has(.card-content-foreground-image) img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px 16px 0 0}
.card-content-media:has(.card-content-pictogram) vvo-image,.card-content-media:has(.card-content-pictogram) img{width:128px;height:128px;object-fit:contain;display:block;border-radius:0}
.card-content{margin-bottom:16px}
@media(min-width:768px){.card-group-content-card-wrapper .content-card-wrapper--icon .card-content-media{width:auto;height:auto;margin-bottom:0;align-items:flex-start;justify-content:flex-start}
.card-group-content-card-wrapper .content-card-wrapper--icon .card-content{margin-bottom:0}
}
@media(max-width:767px){.content-card-wrapper{display:flex;flex-direction:column;padding:16px;gap:16px;position:relative;height:auto;min-height:auto}
.content-card-wrapper:has(.card-content-media){padding-left:132px !important;min-height:132px;gap:8px;padding-top:16px;padding-bottom:16px;padding-right:16px}
.content-card-wrapper:has(.card-content-foreground-image){padding-left:16px !important;min-height:auto}
.card-content-media{position:absolute;top:16px;left:16px;width:100px;height:100px;margin:0;display:flex;align-items:flex-start}
.card-content-media:has(.card-content-foreground-image){position:relative;top:auto;left:auto;width:100%;height:auto}
.card-content-media:has(.card-content-foreground-image) vvo-image,.card-content-media:has(.card-content-foreground-image) img{width:100%;height:auto;object-fit:cover;border-radius:8px}
.card-content-media:has(.card-content-pictogram) vvo-image,.card-content-media:has(.card-content-pictogram) img{width:100%;height:100%;object-fit:contain;border-radius:0}
.content-card-wrapper:has(.card-content-media) .card-content{margin-bottom:8px;text-align:left}
.content-card-wrapper:has(.card-content-media)>div:last-child{margin-top:0;text-align:left}
}