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

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

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

			img {
				transition: all 500ms;
			}
		}

		img {
			display: block;
		}

		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 {
		&.landscape {
			height: 100%;
			width: auto;
		}

		&.portrait {
			height: auto;
			width: 100%;
		}
	}

	.image {
		align-items: center;
		display: flex;
		height: 280px;
		justify-content: center;
		max-height: 280px;
		width: 280px;
		overflow: hidden;
	}
}