/**
 * Styles for Image Box Block.
 *
 * CSS for both Editor + FrontEnd
 */
.dgb-image-box {
	background-size: cover;
	background-position: center;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	position: relative;
	background-color: #999;

	* {
		transition: all .4s ease-in-out !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	button {
		&.components-button {
			z-index: 3;
			margin-bottom: 1em;
		}
	}

	a {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		pointer-events: none;
	}

	h4,
	p {
		z-index: 3;
	}

	h4 {
		margin: 0 0 0.5em !important;
		font-weight: normal;
		font-size: 2rem;
	}

	p {
		margin: 0 !important;
		opacity: 0;
		transform: translateY(-15px);
	}

	&:hover a {
		opacity: .7;
	}

	&:hover p {
		opacity: 1;
		transform: translateY(0);
	}
}

.dgb-image-box {
	&.full-width {
		width: 100% !important;
	}
}

/**
* Frontend Styles.
*/
.wp-block-dgb-image-box {
	&.has-no-content {
		display: none;
	}
}