#multimedia {
	.banner {
		background-image: url('../images/fondo_header.webp');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		aspect-ratio: 2001 / 725;

		#banner-subtitle {
			font-weight: 400;

			strong {
				font-weight: 700;
			}
		}

		#banner-container {
			width: 45%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin-left: -40%;
			text-align: left;

			h2 {
				font-weight: 700;
				color: black;
				text-transform: none;
			}
		}

		@media all and (max-width: 768px) {
			background-position: center left;

			#banner-container {
				width: 90%;
				margin-left: unset;
			}
		}
	}

	#photo-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 20px;
		padding: 2em 0;

		.gallery-item {
			position: relative;
			overflow: hidden;
			border-radius: 10px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			background-color: #f5f5f5;
			aspect-ratio: 1 / 1;
			cursor: pointer;

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

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
			}
		}

		@media all and (max-width: 768px) {
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 15px;
		}

		@media all and (max-width: 480px) {
			grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
			gap: 10px;
		}
	}

	/* Lightbox Modal */
	.lightbox-modal {
		display: none;
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.95);
		animation: fadeIn 0.3s ease;

		&.active {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.lightbox-content {
			position: relative;
			max-width: 90%;
			max-height: 90%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		#lightbox-image {
			max-width: 100%;
			max-height: 85vh;
			object-fit: contain;
			border-radius: 8px;
			box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
		}

		.lightbox-close {
			position: absolute;
			top: 20px;
			right: 40px;
			color: #fff;
			font-size: 50px;
			font-weight: 300;
			cursor: pointer;
			z-index: 10000;
			transition: color 0.3s ease;

			&:hover {
				color: var(--color-primary);
			}
		}

		.lightbox-nav {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background-color: rgba(255, 255, 255, 0.1);
			color: #fff;
			border: none;
			font-size: 40px;
			padding: 20px 25px;
			cursor: pointer;
			transition: background-color 0.3s ease;
			border-radius: 5px;
			z-index: 10000;

			&:hover {
				background-color: rgba(255, 255, 255, 0.2);
			}

			&.lightbox-prev {
				left: 20px;
			}

			&.lightbox-next {
				right: 20px;
			}
		}

		.lightbox-counter {
			color: #fff;
			font-size: 18px;
			margin-top: 15px;
			text-align: center;
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@media all and (max-width: 768px) {
		section .content-boxed,
		section .content-boxed-extended {
			max-width: 95%;
		}

		.lightbox-modal {
			.lightbox-close {
				top: 10px;
				right: 15px;
				font-size: 40px;
			}

			.lightbox-nav {
				font-size: 30px;
				padding: 15px 20px;

				&.lightbox-prev {
					left: 10px;
				}

				&.lightbox-next {
					right: 10px;
				}
			}

			.lightbox-counter {
				font-size: 16px;
			}
		}
	}
}