steffoweb/components/FlipPanel.module.css

@media (max-width: 492px) {
    .flipPanelContainer {
        max-width: 100%;
    }
}

@media (min-width: 492px) {
    .flipPanelContainer {
        max-width: 476px;
    }
}

.flipPanelContainer {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    position: relative;
}

.flipPanelContainer .flipPanelContainer {
    max-width: unset;
}

.flipPanel {
    height: 100%;

    transition-property: transform, z-index, opacity;
    transition-duration: 1s, 1s, 0.5s;
    transition-delay: 0s, 0s, 0s;
}

.flipPanelFront {
    transform: rotateY(180deg);
    z-index: 0;
    user-select: none;
    opacity: 0;
    transition-delay: 0s, 0s, 0.5s;
}

.flipPanelFrontVisible {
    transform: rotateY(0);
    z-index: 1;
    user-select: auto;
    opacity: 1;
    transition-delay: 0s, 0s, 0s;
}

.flipPanelBack {
    transform: rotateY(180deg);
    margin-left: -100%;
    z-index: 0;
    user-select: none;
    opacity: 0;
    transition-delay: 0s, 0s, 0.5s;
}

.flipPanelBackVisible {
    transform: rotateY(0);
    z-index: 1;
    user-select: auto;
    opacity: 1;
    transition-delay: 0s, 0s, 0s;
}