.wrapper {
    display: inline-block;
    width: 90%;
    height: 90%;
}

.flip-container {
    position: absolute !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    perspective: 1000px;
    display: inline-block;
    width: 80%;
    aspect-ratio: 1 / 1;
    max-width: 280px;
    margin: 0 auto;
    cursor: pointer;
}

.flipper {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: relative;
}

.flipped {
    transform: rotateY(180deg);
}

.wrapper {
    position: relative;
    max-height: 100px;
    width: 100%;
}

.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0; /* shorthand for top/right/bottom/left: 0 */
    backface-visibility: hidden;
    object-fit: contain; /* keep aspect ratio inside the box */
}

.back {
    transform: rotateY(180deg);
}