@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;
			}
		}

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

		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;
		}
	}

	.slide {
		background: rgba($color-overlay, 0.7);
		display: none;
		height: 100vh;
		justify-content: center;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 2;

		&:target {
			display: flex;
		}

		a {
			color: $color-overlay-text;
			display: block;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}

		img {
			display: block;
			height: 100%;
			object-fit: scale-down;
			width: 100%;
		}

		p {
			background: rgba($color-overlay, 0.9);
			bottom: 0;
			display: flex;
			justify-content: space-between;
			margin-bottom: 0;
			padding: 0.5em 1.5em;
			position: absolute;
			width: 100vw;
			z-index: 3;
		}
	}
}