@font-face {
	font-family: KyivTypeSerif;
	src: url(../fonts/KyivTypeSerif-VarGX.ttf)
}

:root {

	--clr-neutral-100: #ffffff;
	/* --clr-neutral-800: #343030; */
	--clr-primary-100: #F17A9F;
	--clr-primary-500: #C63836;

	--ff-primary: 'Roboto', sans-serif;
	--ff-secondary: "KyivTypeSerif", serif;



}


/* ===== BASE SETTINGS  ===== */

.banner-vts3 {
	font-family: var(--ff-primary);
	background-color: var(--clr-neutral-100);
	/* color: var(--clr-neutral-800); */
	padding: 40px 0;
}

.banner-vts3 .container,
.banner-vts3 {
	min-width: 375px;
}

a:has([class]) {
	color: inherit;
}

.banner-vts3 img,
.banner-vts3 picture {
	width: 100%;
	display: block;
}

.banner-vts3 svg {
	width: 100%;
}

/* 
.container,
.flow {
	margin: 0 auto;
} */

.banner-vts3 .container {
	max-width: var(--container-max-width);
	width: 100%;
	padding: 0 15px;
}

.grid {
	display: grid;
	grid-auto-columns: 1fr;
}

.main-title {
	font-family: var(--ff-secondary);
	font-size: 9em;
}



/* ===== BUTTONS ===== */

.banner-vts3__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 40px;
	font-size: 16px;
}

.banner-vts3__button {
	--unit: 1em;
	display: block;
	box-sizing: border-box;
	padding: calc(0.6 * var(--unit)) 0;
	/* calc(4.81 * var(--unit)); */
	font-size: calc(1.5 * var(--unit));
	transition: 0.2s linear;
	background-color: var(--clr-primary-100);
	color: var(--clr-neutral-100);
	font-weight: 700;
	max-width: 265px;
	text-align: center;
	width: 100%;
	text-decoration: none;
}


.banner-vts3__button:hover {
	background-color: var(--clr-primary-500);
}



/* ===== BANNER ===== */

.banner-vts3 {
	font-size: 10px;
	margin: 50px 0;
	color: var(--clr-neutral-800);
}

.banner-vts3__grid {

	grid-auto-columns: 60% 40%;
	grid-template-areas:
		"one  two "
		"three five"
		"four five";

	row-gap: 50px;

}

.banner-vts3__item:nth-child(1) {
	grid-area: one;
}

.banner-vts3__item:nth-child(2) {
	grid-area: two;
}

.banner-vts3__item:nth-child(3) {
	grid-area: three;
}

.banner-vts3__item:nth-child(4) {
	grid-area: four;
}

.banner-vts3__item:nth-child(5) {
	grid-area: five;
}

.banner-vts3__item.banner-vts3__logo {
	justify-self: end;
	width: clamp(200px, 23vw, 350px);
}

.banner-vts3__item:where(.banner-vts3__annotation) {
	padding-left: clamp(100px, 2vw, 200px)
}

.banner-vts3__item .main-title {
	color: var(--clr-primary-500);
}

.banner-vts3__item .event-annotation {
	font-size: clamp(16px, 2.8vw, 30px);
	max-width: 700px;
}

.banner-vts3__item .event-data {
	font-size: clamp(20px, 2.4vw, 36px);
	font-weight: 500;
}

.banner-vts3__item .main-title {
	margin-bottom: 15px;
	font-size: clamp(50px, 7vw, 90px);
}

.banner-vts3__item:where(.banner-vts3__img) {
	max-width: 455px;
	margin-left: clamp(100px, 2vw, 200px);
	width: 100%;
}

.banner-vts3__item.banner-vts3__map {
	padding-top: 50px;
}



@media (max-width: 1040px) {
	.banner-vts3__map {
		display: none;
	}

	.banner-vts3__grid {

		grid-auto-columns: 1fr;
		grid-template-areas:
			"one  two "
			"four four"
			"three three"
		;
		align-items: center;
		row-gap: 30px;
	}

	.banner-vts3__item:where(.banner-vts3__annotation, .banner-vts3__img) {
		justify-self: center;
		padding-left: 0;
		margin-left: 0;
		text-align: center;
	}

	.banner-vts3__item>:where(.banner-vts3__annotation, .banner-vts3__img) {
		text-align: center;
	}
}

@media (max-width: 600px) {

	.banner-vts3__item.banner-vts3__logo {
		display: none;
	}

	.banner-vts3__grid {

		grid-auto-columns: 1fr;
		grid-template-areas:
			"one  one "
			"four four"
			"three three"
		;
		align-items: center;
		row-gap: 30px;
	}

	.banner-vts3__item .event-data {
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {


	.banner-vts3__button {
		font-size: 20px;
		max-width: 240px;
		padding: 13px 0;
	}


}