.card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(290px, 100vw));
	gap: 48px 24px;
}

@media only screen and (max-width: 1875px) {
	.card-grid {
		grid-template-columns: repeat(4, minmax(290px, 100vw));
	}
}

@media only screen and (max-width: 1550px) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(290px, 100vw));
	}
}

@media only screen and (max-width: 1200px) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(250px, 100vw));
	}
}

@media only screen and (max-width: 990px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(175px, 100vw));
	}
}

@media only screen and (max-width: 450px) {
	.card-grid {
		grid-template-columns: repeat(1, minmax(155px, 100vw));
	}
}

.events-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;

	&:hover {
		transform: translateY(-6px);
	}

	.events-card-image {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: 8px 8px 0 0;
		margin-bottom: 12px;
	}

	.events-card-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-inline: 20px;

		.events-card-title {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			font-size: 18px;
			font-weight: 700;
			height: 44px;
			margin: 0;
			line-height: normal;
		}

		.events-card-excerpt {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			font-size: 14px;
			font-weight: 400;
			color: var(--normalGray);
			line-height: normal;
			height: 51px;
			margin: 0;
		}

		.events-card-header {
			display: flex;
			justify-content: space-between;

			.events-card-title {
				font-size: 1.1rem;
				font-weight: bold;
			}
		}

		.events-card-date {
			font-size: 0.85rem;
			font-weight: 600;
			margin-top: auto;
			padding: 4px 14px;
			background: #000;
			width: max-content;
			border-radius: 25px;
			color: #fff;
		}
	}

	.events-card-footer {
		padding: 0 20px 28px 20px;
		.events-card-date {
			font-size: 16px;
			font-weight: 700;
			color: var(--darkGray);
			margin-top: auto;
		}
	}

	&.theme_1 {
		box-shadow: none;
		padding: 0;
		margin: 0;

		.events-card-image {
			border-radius: 8px;
		}

		.events-card-body {
			padding: 0;
			.events-card-title {
				height: 54px;
			}

			.events-card-date {
				display: none;
			}

			.events-card-excerpt {
				height: 66px;
			}
		}

		.events-card-footer {
			padding: 0;
		}
	}
}

.single-event {
	.single-event-layout {
		.single-event-title {
			color: #000;
			font-size: 40px;
			font-weight: 700;
			margin-bottom: 24px;
			overflow-wrap: anywhere;
		}

		.single-event-gallery {
			margin-bottom: 2rem;

			.gallery-main-image {
				margin-bottom: 1rem;
				overflow: hidden;
				height: 450px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8px;
				overflow: hidden;

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

			.gallery-thumbnails {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;

				.thumbnail-item {
					flex: 0 0 auto;
					width: 75px;
					height: 75px;
					overflow: hidden;
					cursor: pointer;
					transition: border-color 0.3s ease, opacity 0.3s ease;

					&:hover {
						opacity: 0.8;
					}

					&.active {
						border-color: var(--mainColor);
					}

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 8px;
					}
				}

				@media (max-width: 768px) {
					.thumbnail-item {
						width: 60px;
						height: 60px;
					}
				}
			}
		}

		.single-event-contacts {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-block: 20px;
			font-size: 14px;
			font-weight: 700;

			.single-event-contact {
				display: flex;
				align-items: center;
				gap: 0.7rem;
				color: black;
				width: max-content;
				max-width: 100%;
			}
		}

		.map-grid-item {
			min-height: 225px;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.16);
			border: 2px solid white;
			max-height: 250px;
			margin-top: 30px;

			#map {
				height: 225px;
				width: 100%;

				.leaflet-popup-content-wrapper {
					background: black;
					color: white;
					border-radius: 25px;
				}

				.leaflet-popup-tip-container {
					display: none;
				}
			}
		}

		.single-event-date {
			font-size: 16px;
			font-weight: 600;
			padding: 4px 14px;
			background: #000;
			width: max-content;
			max-width: 100%;
			border-radius: 25px;
			color: #fff;
			margin-bottom: 24px;
		}

		.single-event-body {
			margin-bottom: 24px;
			color: var(--darkGray);
		}
	}

	.woocommerce-breadcrumb {
		padding: 25px 0;
		font-size: 0.9rem;
		color: #888;

		a {
			color: #666;
			text-decoration: none;
		}

		.current {
			font-weight: 600;
			color: #000;
		}
	}
}

@media only screen and (max-width: 769px) {
	.events-card {
		.events-card-image {
			margin-bottom: 0;
		}

		.events-card-body {
			padding-inline: 10px;

			.events-card-title {
				font-size: 16px;
				height: 38px;
			}

			.events-card-excerpt {
				font-size: 12px;
				margin-bottom: 0;
				height: 42px;
			}

			.events-card-date {
				font-size: 0.75rem;
				width: 100%;
				text-align: center;
			}
		}

		.events-card-footer {
			padding: 0 10px 18px 10px;
		}

		&.theme_1 {
			.events-card-body {
				.events-card-title {
					height: 50px;
				}

				.events-card-excerpt {
					height: 57px;
				}
			}
		}
	}
}