/*!
 * Alcateia Widgets: Portfolio Gallery (alw-gl), grid
 * Author: Joao Pedro | Alcateia Marketing & Design Agency
 * Author URI: https://alcateiaagency.com/
 *
 * Automatic crop: each cell has a fixed aspect-ratio and the photo uses object-fit.
 * Columns, count per breakpoint, ratio and gap come from the panel as --alw-gl-* variables.
 * Media queries only as "(max-width: 1024px)" and "(max-width: 767px)" (rewritten for custom breakpoints).
 */
.alw-gl {
	--alw-gl-c: 4;
	display: grid;
	grid-template-columns: repeat(var(--alw-gl-c), minmax(0, 1fr));
	gap: var(--alw-gl-gap, .75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alw-gl .alw-gl__item {
	margin: 0;
	padding: 0;
	aspect-ratio: var(--alw-gl-r, 4 / 3);
	overflow: hidden;
	background: var(--alw-gl-ph, rgba(127, 127, 127, .12));
}

.alw-gl .alw-gl__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Thumbnail button of the lightbox. Here, not in the lightbox file, so the grid never shifts while that file loads. */
.alw-gl .alw-gl__open {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	cursor: zoom-in;
}

/* Beats the kit button hover (".elementor-kit-N button:hover") */
.alw-gl .alw-gl__open:hover,
.alw-gl .alw-gl__open:focus {
	background: none;
}

@media (max-width: 1024px) {
	.alw-gl {
		--alw-gl-c: 3;
	}
}

@media (max-width: 767px) {
	.alw-gl {
		--alw-gl-c: 2;
	}
}