:root {
    --dimensions: 275px;
    --wheels: 50px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card {
    width: var(--dimensions);
    height: calc(var(--dimensions) * 1.4);
    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px;
}

.text,
.heading {
    position: absolute;
}

.card {
    transition: 0.3s;
    transform: rotate3d(0, 1, 0, 0deg);
}

.card:hover {
    transition: 0.3s;
    transform: rotate3d(0, 1, 0, 180deg);
}
.card .heading {
    visibility: visible;
}

.card:hover .heading {
    visibility: hidden;
}

.card .text {
    visibility: hidden;
}

.card:hover .text {
    visibility: visible;
}