@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.wp-block-jetpack-instagram-gallery__grid {
	align-content: stretch;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;

	.wp-block-jetpack-instagram-gallery__grid-post {
		box-sizing: border-box;
		display: block;
		line-height: 0;
		position: relative;
	}

	img {
		height: auto;
		width: 100%;
	}
}

@for $i from 1 through 6 {
	.wp-block-jetpack-instagram-gallery__grid-columns-#{$i}
	.wp-block-jetpack-instagram-gallery__grid-post {
		width: calc(100% / #{$i});
	}
}

@media ( max-width: gb.$break-small ) {

	.wp-block-jetpack-instagram-gallery__grid.is-stacked-on-mobile
	.wp-block-jetpack-instagram-gallery__grid-post {
		width: 100%;
	}
}

@supports ( display: grid ) {

	.wp-block-jetpack-instagram-gallery__grid {
		display: grid;
		grid-gap: 10px;
		grid-auto-columns: 1fr;

		@media ( max-width: gb.$break-small ) {

			&.is-stacked-on-mobile {
				display: block;

				.wp-block-jetpack-instagram-gallery__grid-post {
					padding: var(--latest-instagram-posts-spacing);
				}
			}
		}

		.wp-block-jetpack-instagram-gallery__grid-post {
			width: auto;

			img {
				height: 100%;
				object-fit: cover;
			}
		}
	}

	@for $i from 1 through 6 {
		.wp-block-jetpack-instagram-gallery__grid-columns-#{$i} {
			grid-template-columns: repeat($i, 1fr);
		}
	}
}

@supports ( object-fit: cover ) {

	.wp-block-jetpack-instagram-gallery__grid-post img {
		height: 100%;
		object-fit: cover;
	}
}
