/* version 1.5 */

/* copy all this css and adapt it to your style - then add this line
	
	add_theme_support( 'mgznkr-flipcard-css' );
	
	to your themes style.css - so this file won't get loaded.
*/

.mgznkr-flipcard-block .wp-block-group__inner-container,
.mgznkr-flipcard-wrapper {
  height: auto;
  perspective: 200px;
  margin: 0 auto;
}

div.mgznkr-flipcard,
.mgznkr-flipcard-block div.mgznkr-flipcard {
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  display: grid;
}

.mgznkr-flipcard.is-flipped {
  transform: rotateY(180deg);
}

.mgznkr-flipcard-content {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.wp-block-column.mgznkr-flipcard-content {
	width: 100%;
	margin: 0;
}

.mgznkr-flipcard-content-back {
  transform: rotateY(180deg);
}

/* wp5.9 */
.mgznkr-flipcard-block {
	--wp--style--block-gap: 0;
}

/* styling - could be in theme styles.css */

.mgznkr-flipcard-block .wp-block-group__inner-container,
.mgznkr-flipcard-wrapper {
  width: 280px;
}

.mgznkr-flipcard-content {
  text-align: center;
  border-radius: 20px;
  box-shadow: 1px 1px 8px rgba(0,0,0,0.4);
  padding: 1em 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center
}

.mgznkr-flipcard-content-front {
  color: #111;
  background: #eee;
}

.mgznkr-flipcard-content-back {
  color: #fff;
  background: #666;
}

.mgznkr-flipcard-content > *:nth-last-child(2) {
  flex-grow: 1;
}



/* the grid or flex */


.mgznkr-flipcard-grid:not(.wp-block-group),
.mgznkr-flipcard-grid.wp-block-group .wp-block-group__inner-container {
	display: grid;
	grid-gap: 3em;
	grid-template-columns: repeat(auto-fit, minmax(320px, 320px));
	justify-content: space-between;
	margin: 3em auto;
}

.mgznkr-flipcard-flex:not(.wp-block-group),
.mgznkr-flipcard-flex.wp-block-group .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 3em 0;
}

.mgznkr-flipcard-flex.wp-block-group .wp-block-group__inner-container {
	height: calc(100% - 3em);
	margin: 1.5em 0;
}

.mgznkr-flipcard-flex:not(.wp-block-group) .mgznkr-flipcard-wrapper,
.mgznkr-flipcard-flex.wp-block-group .wp-block-group__inner-container .mgznkr-flipcard-wrapper {
	margin: 0 1.5em 3em 1.5em;
}