/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.wp-block-cgb-instagram-instagram-for-gutenberg {
	margin: 0 auto;
	@media all and (max-width: $xs) {
		.instagram-grid {
			grid-template-columns: repeat(1, 1fr) !important;
		}
	}
	@media all and (min-width: $xs) and (max-width: $sm) {
		.instagram-grid {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}
	@media all and (min-width: $sm) and (max-width: $lg) {
		.instagram-grid {
			grid-template-columns: repeat(4, 1fr) !important;
		}
	}
	.instagram-grid.use-thumbnail {
		grid-auto-rows: min-content;
	}
}

.display-grid {
	display: grid;
}

/* flexbox fallback if the browser does not support display:grid */
@supports not (display: grid) {
	.display-grid {
		display: flex;
		flex-wrap: row wrap;
		> * {
			flex: 0 1 1;
		}
	}
}

/**
Image Styling
**/
.instagram-image-wrapper {
	position: relative;

	&:hover {
		.instagram-image-overlay {
			opacity: 1;
		}
		img {
			opacity: 0.6;
		}
	}

	// equal height/width images
	&.has-equal-images {
		overflow: hidden;
		padding-bottom: 100%;
		img {
			position: absolute;
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}
.instagram-image {
	display: block;
	margin: 0 auto; // center the image in the container
}

.instagram-image-overlay {
	transition: all 0.25s ease-in;
	position: absolute;
	background-color: transparent;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	&:before {
		content: ' ';
		opacity: 1;
		background: url(../assets/instagram-icon-white.svg) no-repeat center center;
		background-size: 30px 30px;
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}

/**
Profile pictures
**/
.instagram-profile-container {
	display: block;
	margin-bottom: 1rem;
	@media all and (min-width: 541px) {
		display: grid;
		grid-template-columns: 60px auto;
		grid-column-gap: 1rem;
	}
}
.instagram-profile-picture {
	border-radius: 100%;
}
.instagram-bio-container {
	h3,
	p {
		margin-top: 0;
		margin-bottom: 0;
	}
}