/**
  * Gallery component
 */

.gallery {
	--gallery-gutter: calc(var(--bs-gutter-x) * .5);
	--gallery-image-radius: var(--bs-border-radius-lg);

	@media screen and (min-width: 640px) {
		--gallery-gutter: var(--bs-gutter-x);
	}

	.row-photos {
		display: grid;
		gap: var(--gallery-gutter);

		> .column-photo:first-child {
			grid-column: span 2;
		}

		@media screen and (min-width: 640px) {
			grid-template-columns: repeat(4, 1fr);

			> .column-photo:first-child {
				grid-row: span 2;
			}
		}
	}

	.column-photo {
		position: relative;
	}

	.image {
		aspect-ratio: 1 / 1;
		border-radius: var(--gallery-image-radius);
		margin: 0;
		overflow: hidden;
		position: relative;

		&:focus-within {
			box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
		}

		a {
			aspect-ratio: 1 / 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.icon {
			transition: all .3s ease;
			background: var(--gray-900);
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			inset: auto;
			margin: 0;
			opacity: 0;
			width: 36px;
			height: 36px;

			svg {
				fill: #FFFFFF;
				width: 16px;
				height: 16px;
			}
		}

		&:hover .icon {
			opacity: 1;
		}
	}

	.show-more-photos {
		background: var(--gray-900);
		color: var(--white);
		line-height: 1;
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 4px;
		padding: .375rem .5rem;
		position: absolute;
		right: var(--spacing);
		bottom: calc(var(--spacing) * .5);

		.icon svg {
			width: 14px;
			height: 14px;
			fill: currentColor;
		}

		.title {
			color: currentColor;
			font-size: var(--font-size-16);
		}
	}

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