.carousel {--wimg: 80%;--h: 60vh;--cardw: 100%;--side-space: calc((var(--we) - var(--wa)) / 2);}.carousel__stage { position: relative; }.carousel__card {position: relative;display: grid;grid-template-columns: var(--wimg) calc(var(--wimg) / 4);width: var(--cardw);margin-inline: auto;overflow: hidden;background: var(--brand-purple);}.carousel__media {position: relative;min-width: 0;height: var(--h, 60vh);background: var(--brand-aux);}.carousel__slide {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity 0.55s ease;pointer-events: none;}.carousel__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }.carousel__slide picture { display: contents; }.carousel__img {display: block;width: 100%;height: 100%;object-fit: contain;opacity: 0;transition: opacity 0.35s ease;}.carousel__img.is-loaded { opacity: 1; }.carousel__info {min-width: 0;display: flex;flex-direction: column;justify-content: center;gap: 0.75rem;padding: 1.75rem;color: #ffffff;background: var(--brand-purple);box-sizing: border-box;}.carousel__info-tag { margin: 0; font-size: var(--text-little); letter-spacing: 0.14em; opacity: 0.9; }.carousel__info-title { margin: 0; font-size: var(--text-h2); line-height: 1.4; }.carousel__info-sub { margin: 0; font-size: var(--text-normal); line-height: 1.7; opacity: 0.88; }.carousel__info-open {align-self: flex-start;margin-top: 0.5rem;padding: 0.625rem 1.25rem;border: 0;border-radius: var(--radius-card);background: #ffffff;color: var(--brand-purple);font: inherit;font-weight: 700;}.carousel__info-open:hover { background: #f6e7fb; }[data-card-action="viewer"] .carousel__media { cursor: zoom-in; }[data-card-action="viewer"] .carousel__info,[data-card-action="viewer"] .carousel__info-open,[data-card-action="link"] .carousel__media,[data-card-action="link"] .carousel__info,[data-card-action="link"] .carousel__info-open { cursor: pointer; }.carousel__arrow {position: absolute;top: 50%;transform: translateY(-50%);z-index: 5;width: 1.44rem;height: 2.75rem;padding: 0;border: 0;background: transparent;color: var(--color-primary);cursor: pointer;}.carousel__arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }.carousel__arrow svg path { fill: currentColor; }.carousel__arrow:hover { color: var(--brand-purple); }.carousel__arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }.carousel__arrow--prev {left: max(calc(-1 * var(--side-space, 0px)), calc(50% - var(--cardw) / 2 - 2.44rem));}.carousel__arrow--next {right: max(calc(-1 * var(--side-space, 0px)), calc(50% - var(--cardw) / 2 - 2.44rem));}.carousel__dots {display: flex;flex-wrap: wrap;justify-content: center;gap: 0.75rem;width: var(--cardw);max-width: 100%;margin: 1rem auto 2rem;}.carousel__dot {flex: 0 0 auto;width: 0.75rem;height: 0.75rem;padding: 0;border: 1px solid var(--brand-purple);border-radius: 50%;background: #ffffff;cursor: pointer;}.carousel__dot:hover:not(.is-active) { background: #e9c9f2; }.carousel__dot.is-active { background: var(--brand-purple); border: 0; }.carousel__dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }.carousel__live {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);}.carousel__viewer {position: fixed;inset: 0;z-index: 100;display: flex;align-items: center;justify-content: center;background: var(--brand-aux);}.carousel__viewer[hidden] { display: none; }.carousel__viewer-img {max-width: 100vw;max-height: 100vh;width: auto;height: auto;opacity: 0;transition: opacity 0.35s ease;}.carousel__viewer-img.is-loaded { opacity: 1; }.carousel__viewer-close {position: absolute;top: 1.5rem;right: 1.5rem;z-index: 2;width: 3rem;height: 3rem;border: 1px solid rgba(255, 255, 255, 0.5);border-radius: 50%;background: transparent;color: #ffffff;font-size: 1.5rem;cursor: pointer;}.carousel__viewer-close:hover { background: rgba(255, 255, 255, 0.15); }@media (prefers-reduced-motion: reduce) {.carousel__slide,.carousel__img,.carousel__viewer-img,.carousel__info-open { transition: none; }}@media (max-width: 959px) {.carousel__card {grid-template-columns: 100%;grid-template-rows: var(--h) minmax(calc(var(--h) / 2), auto);width: 100%;}.carousel__arrow--prev,.carousel__arrow--next {top: calc(var(--h) / 2);}}.carousel--image-only {--h: 75vh;}.carousel--image-only .carousel__card {grid-template-columns: 100%;grid-template-rows: var(--h);}
