.events-page {

	--content-padding: 0 20px;
	--content-columns: 1fr;

	--filter-order: 0;
	--filter-gap: 6px;

	--content-gap: 8px;

}

.events-page__content {

	display: grid;
	grid-template-columns: var(--content-columns);
	gap: 12px 20px;

	padding: var(--content-padding);

}

.events-page-filter {
	order: var(--filter-order);
	display: flex;
	flex-flow: column;
	gap: var(--filter-gap);
}
.events-page-filter__cities-list {
	display: flex;
	flex-flow: column;
	gap: 2px;
	padding: 6px;
}
.events-page-filter__switch {
	display: flex;
	flex-flow: row nowrap;
	width: max-content;
	padding: clamp(3px, calc(3px + (4 - 3) * var(--fluid-factor)), 4px);
	background-color: var(--neutral-0050);
}

.events-page-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--content-gap);
}

.event-card {

	--events-grid-columns: 1fr;

	--grid-gap: clamp(8px, calc(8px + (12 - 8) * var(--fluid-factor)), 12px);
	--column-gap: clamp(16px, calc(16px + (24 - 16) * var(--fluid-factor)), 24px);

	--event-card-padding: 12px;
	--event-card-padding-left: var(--event-card-padding);
	--event-card-background-color: var(--neutral-0100);

	--event-card-picture-size: 140px;

	position: relative;

	display: grid;
	align-items: start;
	grid-template-columns: var(--events-grid-columns);
	gap: var(--grid-gap) var(--column-gap);

	padding: calc(var(--event-card-padding) - 1px);
	padding-left: calc(var(--event-card-padding-left) - 1px);

	background-color: var(--event-card-background-color);

	border: 1px solid var(--neutral-0150, #EBE9E7);
	border-radius: 6px;

}

.event-card:active {
	--event-card-background-color: var(--neutral-0150);
}

.event-card__meta {

}
.event-card__day {
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: clamp(36px, calc(36px + (48 - 36) * var(--fluid-factor)), 48px);
	line-height: 1;
	color: var(--neutral-1000);
}
.event-card__datetime {
	font-weight: 500;
	font-size: clamp(16px, calc(16px + (20 - 16) * var(--fluid-factor)), 20px);
	line-height: 1.22;
	color: var(--neutral-0700);
}
.event-card__price {
	font-weight: 700;
	font-size: clamp(18px, calc(18px + (24 - 18) * var(--fluid-factor)), 24px);
	line-height: 1.55;
	color: var(--neutral-1000);
}
.event-card__badges {
	display: flex;
	flex-flow: row wrap;
	gap: 4px;
}
.event-card__picture {
	position: relative;
	width: var(--event-card-picture-size);
	height: var(--event-card-picture-size);
	border-radius: 6px;
	overflow: hidden;
}
.event-card__picture img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.event-card__text {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
}
.event-card._top .event-card__text::after {
	content: '';
	position: absolute;
	width: 80px;
	aspect-ratio: 1;
	background: url('../../images/cup.png') no-repeat center center / contain;
}

.event-card__title {
	font-weight: 600;
	font-size: clamp(18px, calc(18px + (24 - 18) * var(--fluid-factor)), 24px);
	line-height: 1.5;
	color: var(--neutral-1000);
}
.event-card__description {
	max-height: 130px;
	overflow: hidden;
	font-weight: 400;
	font-size: clamp(16px, calc(16px + (20 - 16) * var(--fluid-factor)), 20px);
	line-height: 1.6;
	color: var(--neutral-0700);
}
.event-card__description p + p {
	margin-top: 8px;
}
.event-card__read-more {

}

@media (max-width: 639.98px) {

	.event-card._top .event-card__text::after {
		left: 120px;
		bottom: calc(100% - 2px);
	}
}
@media (min-width: 640px) {

	.event-card {
		--events-grid-columns: var(--event-card-picture-size) 1fr;
	}
	.event-card__text {
		grid-column: span 2;
	}
	.event-card__picture + .event-card__text {
		grid-column: span 1;
	}
}

@media (min-width: 640px) and (max-width: 1199.98px) {
	.event-card._top .event-card__text {
		padding-right: 76px;
	}
	.event-card._top .event-card__text::after {
		top: 0;
		right: 0;
		width: 60px;
	}
}

@media (max-width: 1199.98px) {

	.events-page-filter__cities-list {
		display: none;
	}

}

@media (min-width: 1200px) {

	.events-page {

		--content-padding: 0 20px;

		--filter-order: 1;
		--filter-gap: 8px;

		--content-columns: 1fr clamp(247px, calc(247px + (425 - 247) * var(--fluid-factor)), 425px);

	}

	.event-card {
		--event-card-padding: clamp(16px, calc(16px + (24 - 16) * var(--fluid-factor)), 24px);
		--event-card-padding-left: clamp(188px, calc(188px + (276 - 188) * var(--fluid-factor)), 276px);
		--event-card-picture-size: clamp(128px, calc(128px + (160 - 128) * var(--fluid-factor)), 160px);
	}

	.event-card__meta {
		position: absolute;
		top: 16px;
		left: 16px;
		max-width: 160px;
	}

	.event-card__badges {
		grid-column: span 2;
	}

	.event-card._top .event-card__text::after {
		top: clamp(60px, calc(60px + (80 - 60) * var(--fluid-factor)), 80px);
		right: calc(100% + var(--event-card-picture-size) + var(--column-gap) - 20px);
	}
}

@media (min-width: 1840px) {

	.events-page {

		--content-padding: 20px 40px;

	}

	.event-card__meta {
		top: 24px;
		left: 24px;
	}

}