.wp-block-cards-flip {
margin-top: 4em;
margin-bottom: 4em;
}
.wp-block-cards-flip h2 {
margin-top: 0;
margin-bottom: 0.375em;
}
.wp-block-cards-flip .wp-block-cards-flip__cards {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
}
.wp-block-cards-flip .wp-block-cards-flip__card {
flex: 1;
min-width: 20em; }
.wp-block-cards-flip .wp-block-cards-flip__card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.wp-block-cards-flip .wp-block-cards-flip__card:hover .wp-block-cards-flip__card-inner {
transform: rotateY(180deg);
}
.wp-block-cards-flip .wp-block-cards-flip__card-front,
.wp-block-cards-flip .wp-block-cards-flip__card-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.wp-block-cards-flip .wp-block-cards-flip__card-front {
height: 100%;
width: 100%;
position: absolute;
}
.wp-block-cards-flip .wp-block-cards-flip__card-front img {
border-radius: 4px;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.wp-block-cards-flip .wp-block-cards-flip__card-front h3 {
box-sizing: border-box;
color: #FFFFFF;
font-size: 2.5em;
margin: 0;
padding: 0.5em;
position: absolute;
bottom: 0; text-shadow: 1px 1px 4px #000000;
}
.wp-block-cards-flip .wp-block-cards-flip__card-back {
background-color: #FFD100;
border-radius: 4px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
padding: 4em 2em;
text-align: center;
transform: rotateY(180deg);
}
.wp-block-cards-flip .wp-block-cards-flip__card-back p {
margin: 0;
} .wp-block-cards-flip.theme-background .wp-block-cards-flip__card-front h3 {
background-color: #001F59CC;
border-radius: 0 0 4px 4px;
text-align: center;
text-shadow: none;
width: 100%;
}
@media (max-width: 768px) {
.wp-block-cards-flip .wp-block-cards-flip__card-front::after { font-family: 'kuchenmeister' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 2em;
position: absolute;
top: 0.25em;
right: 0.25em;
}
.wp-block-cards-flip .wp-block-cards-flip__card-front::after {
content: '\e913';
color: #FFFFFF;
text-shadow: 1px 1px 4px #00000080;
}
} .wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-cards-flip h2,
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-cards-flip .wp-block-cards-flip__card {
opacity: 0;
}