.rdbd {
position: relative;
}
.rdbd[data-swap="1"],
.rdbd[data-overlay-swap="1"] {
cursor: pointer;
}
.rdbd[data-swap="1"]:focus-visible,
.rdbd[data-overlay-swap="1"]:focus-visible {
outline: 2px solid #8B3A2A;
outline-offset: 6px;
}
.rdbd-stack {
position: relative;
width: 100%;
aspect-ratio: 4/5;
--rdbd-offset: 18%;
--rdbd-duration: 700ms;
--rdbd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.rdbd-frame {
position: absolute;
width: calc(100% - var(--rdbd-offset));
height: calc(100% - var(--rdbd-offset));
overflow: hidden;
opacity: 1;
will-change: transform, opacity;
transition: transform var(--rdbd-duration) var(--rdbd-ease), opacity var(--rdbd-duration) var(--rdbd-ease);
}
.rdbd-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rdbd-overlay {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
transition: opacity var(--rdbd-duration) var(--rdbd-ease);
}
.rdbd-frame--back {
z-index: 1;
}
.rdbd-frame--front {
z-index: 2;
} .rdbd[data-overlay-swap="1"] .rdbd-overlay--front {
opacity: 0;
} .rdbd-stack--br .rdbd-frame--back { top: 0; left: 0; }
.rdbd-stack--br .rdbd-frame--front { bottom: 0; right: 0; }
.rdbd-stack--bl .rdbd-frame--back { top: 0; right: 0; }
.rdbd-stack--bl .rdbd-frame--front { bottom: 0; left: 0; }
.rdbd-stack--tr .rdbd-frame--back { bottom: 0; left: 0; }
.rdbd-stack--tr .rdbd-frame--front { top: 0; right: 0; }
.rdbd-stack--tl .rdbd-frame--back { bottom: 0; right: 0; }
.rdbd-stack--tl .rdbd-frame--front { top: 0; left: 0; } @media (hover: hover) and (pointer: fine) {
.rdbd[data-swap="1"]:hover .rdbd-frame--back {
z-index: 3;
opacity: 1;
transform: translate(1.5%, 1.5%) scale(1.008);
}
.rdbd[data-swap="1"]:hover .rdbd-frame--front {
z-index: 2;
opacity: 0.8;
transform: scale(0.992);
}
.rdbd[data-overlay-swap="1"]:hover .rdbd-overlay--back {
opacity: 0;
}
.rdbd[data-overlay-swap="1"]:hover .rdbd-overlay--front {
opacity: 1;
}
} .rdbd.is-swapped .rdbd-frame--back {
z-index: 3;
opacity: 1;
transform: translate(1.5%, 1.5%) scale(1.008);
}
.rdbd.is-swapped .rdbd-frame--front {
z-index: 2;
opacity: 0.8;
transform: scale(0.992);
}
.rdbd[data-overlay-swap="1"].is-swapped .rdbd-overlay--back {
opacity: 0;
}
.rdbd[data-overlay-swap="1"].is-swapped .rdbd-overlay--front {
opacity: 1;
}
@media (max-width: 500px) {
.rdbd-stack {
--rdbd-offset: 14%;
}
}
@media (prefers-reduced-motion: reduce) {
.rdbd-frame,
.rdbd-overlay {
transition: none;
}
}