@import 'breakpoints';
@import 'colors';

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;

	a {
		&.blur-on-hover {
			overflow: hidden;

			&:hover img {
				filter: blur(5px);
				transform: scale(120%);
			}

			img {
				transition: all 500ms;
			}
		}

		p {
			background: rgba($color-overlay, 0.9);
			color: $color-overlay-text;
			margin-bottom: 0;
			padding: 0.5em 1em;
			position: absolute;
			transform: translateY(-100%);
			width: 280px;
		}
	}

	img {
		display: block;
		height: 280px;
		object-fit: cover;
		width: 280px;
	}
}