:root   {
    --ring-count: 8;
    --ring-radius: min(26.54vw, 509.6px);
    --ring-card-w: min(20.43vw, 392.3px);
    --ring-card-h: min(11.49vw, 220.7px);
    --ring-tilt-x: -17deg;
    --ring-roll: 15deg;
    --ring-perspective: min(148.1vw, 2843.5px);
    --ring-fade: 0.6s;
    --ring-tilt-x-live: var(--ring-tilt-x);
    --ring-lift: 0px;
    --ring-offset-y: max(-0.9896vw, -19px);
    --ring-slices: 5;
    --ring-card-gap: 1deg;
    --ring-back-opacity: 0.25;
    --ring-dim-start: 67deg;
    --ring-dim-in: 30deg;
    --ring-dim-end: 315deg;
    --ring-dim-out: 60deg;
}

@media (max-width: 834px)   {
    :root   {
        --ring-radius: 63.1vw;
        --ring-card-w: 48.6vw;
        --ring-card-h: 27.34vw;
        --ring-perspective: 351.5vw;
        --ring-offset-y: 42.44vw;
    }

}

.sec_hero .stage    {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    perspective: var(--ring-perspective);
    perspective-origin: 50% 50%;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--ring-fade) ease-out;
}

.sec_hero .stage.is-ready   {
    opacity: 1;
}

.ring   {
    position: absolute;
    top: calc(50% + var(--ring-offset-y));
    left: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: translateY(calc(-1 * var(--ring-lift))) rotateZ(var(--ring-roll)) rotateX(var(--ring-tilt-x-live));
}

.ring__spin {
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
}

.ring__card {
    position: absolute;
    margin: 0;
    width: var(--ring-card-w);
    height: var(--ring-card-h);
    top: calc(-1 * var(--ring-card-h) / 2);
    left: calc(-1 * var(--ring-card-w) / 2);
    transform-style: preserve-3d;
    backface-visibility: visible;
    transform: rotateY(var(--card-angle, 0deg)) translateZ(var(--ring-radius));
}

.ring__arc  {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.ring__slice    {
    position: absolute;
    top: 0;
    left: 95%;
    width: var(--slice-w);
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: rotateY(var(--slice-step));
    background-image: linear-gradient(rgba(255, 255, 255, var(--card-dim, 0)), rgba(255, 255, 255, var(--card-dim, 0))), var(--slice-bg, none);
    background-size: 100% 100%, var(--slice-bg-size, var(--ring-card-w) var(--ring-card-h));
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, var(--slice-x) var(--slice-y, 0px);
    backface-visibility: visible;
}

.ring__slice--first {
    left: 0;
    transform: rotateY(var(--slice-first));
    border-radius: 10px 0 0 10px;
}

.ring__slice--last  {
    border-radius: 0 10px 10px 0;
}

.ring__card > .ring__img,
.ring__card > picture   {
    display: none;
}

.ring__img  {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .sec_hero .stage    {
        transition: none;
    }

}