.vivaz-content-carousel { --vivaz-carousel-gap: var(--vivaz-space-5, 1.5rem); --vivaz-carousel-slides: 1; max-width: 100%; }
.vivaz-content-carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.vivaz-content-carousel__viewport::-webkit-scrollbar { display: none; }
.vivaz-content-carousel__track { display: flex; gap: var(--vivaz-carousel-gap); align-items: stretch; }
.vivaz-content-carousel__slide { flex: 0 0 calc((100% - (var(--vivaz-carousel-slides) - 1) * var(--vivaz-carousel-gap)) / var(--vivaz-carousel-slides)); min-width: 0; scroll-snap-align: start; }
.vivaz-content-card { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--vivaz-space-5, 1.5rem); border: 1px solid var(--vivaz-color-border, #d8dee9); border-radius: var(--vivaz-radius-md, .5rem); background: var(--vivaz-color-surface, #fff); box-shadow: var(--vivaz-shadow-sm, 0 .125rem .5rem rgb(29 36 51 / 8%)); transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out; }
.vivaz-content-card__media { width: 100%; margin-block-end: var(--vivaz-space-4, 1rem); overflow: hidden; border-radius: var(--vivaz-radius-sm, .25rem); aspect-ratio: 16 / 9; }
.vivaz-content-card__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.vivaz-content-card__icon { display: inline-flex; margin-block-end: var(--vivaz-space-4, 1rem); font-size: 2.5rem; line-height: 1; }
.vivaz-content-card__icon svg { width: 1em; height: 1em; fill: currentcolor; }
.vivaz-content-card__title { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-family: var(--vivaz-font-family-heading, inherit); line-height: var(--vivaz-line-height-heading, 1.2); }
.vivaz-content-card__description { max-width: 100%; margin-block-start: var(--vivaz-space-3, .75rem); overflow-wrap: anywhere; }
.vivaz-content-card__description > :last-child { margin-block-end: 0; }
.vivaz-content-card__cta { display: inline-flex; gap: var(--vivaz-space-2, .5rem); align-items: center; min-height: 2.75rem; margin-block-start: auto; padding-block-start: var(--vivaz-space-4, 1rem); color: inherit; font-weight: 700; }
.vivaz-content-card__cta:focus-visible, .vivaz-content-carousel__button:focus-visible, .vivaz-content-carousel__viewport:focus-visible { outline: 3px solid var(--vivaz-color-focus, currentcolor); outline-offset: 3px; }
.vivaz-content-carousel__controls { display: none; gap: var(--vivaz-space-3, .75rem); align-items: center; justify-content: flex-end; margin-block-start: var(--vivaz-space-4, 1rem); }
.vivaz-content-carousel.is-ready:not(.is-static) .vivaz-content-carousel__controls { display: flex; }
.vivaz-content-carousel__button { display: inline-grid; min-width: 2.75rem; min-height: 2.75rem; padding: .5rem; place-items: center; border: 1px solid var(--vivaz-color-border, #d8dee9); border-radius: 999px; background: var(--vivaz-color-surface, #fff); color: var(--vivaz-color-text, #1d2433); cursor: pointer; }
.vivaz-content-carousel__button:disabled { opacity: .45; cursor: default; }
.vivaz-content-carousel__status { min-width: 7rem; margin: 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .vivaz-content-card { transition: none; } }
@media (min-width: 48rem) { .vivaz-content-carousel { --vivaz-carousel-slides: 2; } }
@media (min-width: 64rem) { .vivaz-content-carousel { --vivaz-carousel-slides: 3; } }
/* Beats Elementor's ".elementor img { height: auto }" so the image fills its frame. */
.vivaz-content-card .vivaz-content-card__image { height: 100%; }