/**
 * Note that these styles are loaded *before* editor styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */

.wp-block-gutenberg-examples-example-05-recipe-card {
	position: relative;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image {
	background: #f1f1f1;
	float: right;
	width: 100%;
	min-height: 100px;
	text-align: center;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image button {
	margin-top: 30px;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image button.image-button {
	margin: 0;
	padding: 0;
	display: block;
	height: 100px;
    width: 100%;
}

.wp-block-gutenberg-examples-example-05-recipe-card .recipe-image div {
	display: block;
	z-index: 1;
	position: relative;
	height: 600px;
	background-size: cover;
    background-position: center center;
}

.wp-admin .wp-block-gutenberg-examples-example-05-recipe-card .recipe-image div {
	height: 100px;
}

body:not(.wp-admin) .wp-block-gutenberg-examples-example-05-recipe-card h2 {
	font-size: 1.5em;
    position: absolute;
    bottom: 30px;
    color: white;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

body:not(.wp-admin) .wp-block-gutenberg-examples-example-05-recipe-card h2 a {
	color: white;
}

.wp-block-gutenberg-examples-example-05-recipe-card ul {
	padding-left: 2.5em !important; /* Needs fix in Gutenberg. */
}

.wp-block-gutenberg-examples-example-05-recipe-card:after { 
	content:""; 
	clear:both; 
	display: table; 
}