/*
Block Name: Flip blocks
Description: A simple set of tiles that flip to show additional content on hover.
*/


body.wp-admin section { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { color: red; font-weight: 600; content: "This is an empty *block* - add content"; padding: 2rem 0; display: block;}
body.wp-admin section .container .grid .col:empty:before { color: red; font-weight: 600; content: "This is an empty *column* - add content"; padding: 2rem 0; display: block;}

.flip-card { perspective: 2000px;   display: flex; align-items: stretch; height: 0;   }
.flip-card-inner { position: relative; width: 100%; /*height: 0; padding-bottom: 100%; /* Maintain aspect ratio */ transform-style: preserve-3d; transition: transform 0.5s; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; top: 0; left: 0; width: 100%; display: grid; align-content: start; backface-visibility: hidden;}

/* Background colours for flips */
.flip-card-front { background-color: #546A7B; color: #fff; }
.flip-card-back { background-color: #e88b39; color: #fff; transform: rotateY(180deg);  display: grid; align-items: center; }
/* Styling for flips */
.flip-card-front, .flip-card-back { padding: 3rem; /* Same as grid gap */ }
.flip-card-front, .flip-card-back h3 {}
.flip-card-front, .flip-card-back h4 {}
.flip-card-front, .flip-card-back h5 {}
.flip-card-front, .flip-card-back h6 {}