/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.is-style-smaller {
	figure.gallery{
		width: 14%;
		height: auto;
	}
}
.is-style-small {
	figure.gallery{
		width: 20%;
		height: auto;
	}
}
.is-style-large {
	figure.gallery{
		width: 35%;
		height: auto;
	}
}
.is-style-larger {
	figure.gallery{
		width: 50%;
		height: auto;
	}
}

.wp-block-imagesnippets-is-gallery {
	padding: 2px;

	
	div.flex-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-content: space-between;
		padding: 0 5% 5% 5%;
		border: 1px solid #777;
	}

	figure.gallery {
		margin: 1rem;
		border: 1px solid #777;
		position: relative;
	}

	figure.gallery:hover {
		border: 1px solid #ccc;
		opacity: 0.9;
		transform: scale(1.1);
	}

	figure.gallery img {
		width: 100%;
		height: auto;
		opacity: 1;
		object-fit: fit;
	}

	figcaption.desc {
		padding: 0 1px 1px;
		font-size: 0.63rem;
		margin: 0;
		line-height: 1;
		position: absolute;
		bottom: 0;
		right: 0;
		text-align: right;
		color: black;
		opacity: 0.5;
		background-color: #ccc;
	}

	p.title {
		text-transform: uppercase;
		margin: 0;
		padding-left: 1em;
		padding-right: 1em;
		font-size: 1rem;
	}

	p.header {
		font-weight: bold;
		margin: 1em;
		font-size: 1rem;
	}

	p.footer {
		text-transform: capitalize;
		font-size: 0.75rem;
		font-family: "Brush Script MT", Tahoma, Verdana, sans-serif;
		margin: 0;
		padding-left: 1em;
		padding-right: 1em;
	}
}