.events-product-grid {

	.Container--narrow {
		margin: 0 auto;
		@media screen and (max-width: 1024px) {
			padding: 0 20px;
		}
	}

	.epg-controls {

		background: #F0E5D9;
		width: 100%;
		padding: 30px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		@media screen and (max-width: 1024px) {
			padding: 20px;
			flex-wrap: wrap;
		}

		.epg-filter {

			width: calc(25% - 10px);
			position: relative;

			@media screen and (max-width: 1024px) {
				width: calc(50% - 10px);
				@media screen and (max-width: 768px) {
					width: 100%;
					margin-top: 10px;
				}
			}

			svg {
				position: absolute;
				top: 50%;
				left: 20px;
				transform: translate(0,-50%);
			}

			&.epg-filter-search {
				width: calc(50% - 10px);
				@media screen and (max-width: 1024px) {
					width: 100%;
					margin-bottom: 20px;
					@media screen and (max-width: 768px) {
						margin: 0;
					}
				}
			}

			input, select {

				background: #fff;
				height: 50px;
				padding: 0 20px 0 50px;
				border: none;
				width: 100%;
				text-transform: uppercase;
				font-size: 12px;
				letter-spacing: 1px;

			}

			select {
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				background-image: none;
				background: url('icon-chev.svg') calc(100% - 20px) center / 12px no-repeat #fff;
				&::-ms-expand {
					display: none;
				}
			}

		}

	}

	.epg-products {

		display: flex;
		flex-wrap: wrap;
		margin: 20px 0 100px 0;
		gap: 22px;
		row-gap: 32px;

		@media screen and (max-width: 768px) {
			margin-bottom: 50px;
		}

		.event-card {

			width: calc(33.3% - 15px);
			opacity: 0;
			transform: translateY(25px);
			transition:
				opacity .6s ease,
				transform .6s ease;

			&.is-visible,
			&:nth-child(-n+3) {
				opacity: 1;
				transform: translateY(0);
			}

			/* Accessibility */
			@media (prefers-reduced-motion: reduce) {
				opacity: 1;
				transform: none;
				transition: none;
			}

			@media screen and (max-width: 1024px) {
				width: calc(50% - 15px);
			}
			@media screen and (max-width: 768px) {
				width: 100%;
			}

		}

	}

	.event-product-card {

		width: 100%;

		.event-product-card__image {

			width: 100%;
			aspect-ratio: 1/0.7;
			display: block;
			position: relative;
			overflow: hidden;
			border-radius: 6px;
			margin: 0 0 15px 0;

			img {
				
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: .5s all;
				
			}

			&:hover {
				img {
					transform: translate(-50%, -50%) scale(1.05);
				}
			}

		}

		.event-product-card__content {

			.event-product-card__title {
				text-transform: uppercase;
				font-size: 16px;
				letter-spacing: 1px;
				margin: 0 0 10px 0;
				display: inline-block;
			}

			.event-data {

				.event-product-card__location,
				.event-product-card__date {

					display: flex;
					align-items: center;
					gap: 5px;
					font-size: 12px;
					letter-spacing: 1px;
					text-transform: uppercase;
					position: relative;
					padding-left: 30px;
					margin: 0 0 6px 0;

					svg {
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0,-50%);
					}

				}

				.event-product-card__location svg {
					left: 3px;
				}

			}

			.event-product-card__button {

				font-size: 12px;
				text-transform: uppercase;
				letter-spacing: 1px;
				display: flex;
				align-items: center;
				gap: 5px;
				margin: 16px 0 0 0;

				span {
					text-decoration: underline;
				}

			}

		}

	}

	.no-results-msg {

		text-align: center;
		display: none;
		margin: 0 0 60px 0;

		p {
			margin: 0;
			font-size: 16px;
		}

	}

}