@import url("base.css");

.content {
	height: fit-content;
	display: flex;
	width: 100vw;
	flex-direction: column;
	border-radius: 0 0 12.136vw 12.136vw;
	background-color: var(--globe-color);
	height: fit-content;
	display: flex;
}

.scene {
	position: relative;
	height: 50.164vh;
	width: 100vw;
	background-image: url("/assets/banner-hotels.png");
	background-position: 0;
	background-size: cover;
	overflow: hidden;
	background-repeat: no-repeat;
	border-radius: 0 0 12.136vw 12.136vw;
}

.marker {
	position: absolute;
	bottom: 2.617vh;
	right: 5.825vw;
	display: flex;
	flex-direction: row;
	gap: 1.942vw;
}

.marker img {
	width: 3.398vw;
	height: auto;
	padding: 0.218vh 1.214vw;
}

.marker span {
	font-family: "Muller";
	color: var(--primary-inv);
	font-size: var(--h4);
	text-transform: uppercase;
	transform: translateY(0.2rem);
}

.title {
	padding: 1.82vw 1.82vw 1.82vw 0;
	background-color: var(--accent);
	border-radius: 0 22.442vw 22.442vw 0;
	position: absolute;
	top: 14.068vh;
	left: 0;
}

.title span {
	color: var(--primary-inv);
	font-size: var(--h3);
	border-radius: 0 22.442vw 22.442vw 0;
	border-color: var(--globe-color);
	border-width: 0.223vw;
	border-style: solid;
	border-left: none;
	padding: 1.091vh 4.369vw 1.091vh 4.854vw;
	box-sizing: border-box;
	height: fit-content;
	width: fit-content;
	line-height: 120%;
	font-family: "TT Tsars B";
	font-weight: bold;
	text-transform: uppercase;
}

main {
	padding: 5.234vh 5.825vw 6.979vh 5.825vw;
}

.event-title h2 {
	margin-bottom: 4.362vh;
	font-size: var(--h2);
	font-family: "TT Tsars B";
	font-weight: bold;
	color: var(--primary-color);
	text-transform: uppercase;
}

.items {
	display: flex;
	flex-direction: column;
	gap: 6.979vh;
}

.item {
	flex-direction: column;
	gap: 2.617vh;
}

.preview {
	width: 100%;
	height: fit-content;
}

.preview img {
	width: 100%;
	height: 100%;
	border-radius: 12.993vw;
	aspect-ratio: 1/1;
}

.item-content {
	gap: 1.745vh;
	flex-direction: column;
	width: 100%;
	height: fit-content;
	display: flex;
}

.item-name {
	font-family: "Muller";
	font-weight: bold;
	font-size: var(--h4);
	text-transform: uppercase;
}

.item-data {
	display: flex;
	flex-direction: column;
	gap: 0.872vh;
}

.item-where {
	gap: 0.364vw;
	font-size: var(--text);
	color: var(--accent);
	font-weight: bold;
	font-family: "Muller";
	font-weight: bold;
	align-items: start;
}

.item-where img {
	width: 2.184vw;
	height: auto;
	padding: 0.145vh 0.808vw;
}

.item-when {
	flex-direction: row;
	gap: 0.971vw;
	align-items: start;
}

.item-when img {
	width: 3.155vw;
	height: auto;
	padding: 0.323vw;
}

.item-when div {
	font-family: "Muller";
	font-weight: normal;
	font-size: var(--text);
	color: var(--secondary-color);
	display: flex;
	flex-direction: column;
}

.item-description {
	color: var(--tetriary-color);
	font-family: "Muller";
	font-weight: normal;
	font-size: var(--text);
	flex-direction: column;
	display: flex;
}

.item-contacts {
	flex-direction: column;
	gap: 0.872vh;
	font-size: var(--text);
	font-family: "Muller";
}

.item-contacts a {
	text-decoration: none;
	color: var(--secondary-color);
}

.item-phone {
	flex-direction: row;
	display: flex;
	gap: 0.2rem;
	font-weight: bold;
	color: var(--secondary-color);
}

.item-phone a {
	text-decoration: none;
	color: var(--secondary-color);
}

.item-site {
	align-items: center;
	flex-direction: row;
	gap: 1.942vw;
	font-weight: normal;
	text-decoration: none;
}

.item-site img {
	padding: 0.485vw;
	height: auto;
	width: 4.854vw;
}

.item-site span {
	text-decoration: none;
	color: var(--secondary-color);
}

.item-site {
	text-decoration: none;
	color: var(--secondary-color);
}

.item-vk {
	align-items: center;
	flex-direction: row;
	gap: 1.942vw;
	font-weight: normal;
}

.item-vk img {
	padding: 0.027vh 0.061vw;
	height: auto;
	width: 5.583vw;
}

.item-vk:hover img {
	color: #3a8c80;
	fill: #3a8c80;
}

.item-vk span {
	text-decoration: none;
	color: var(--secondary-color);
}

footer {
	padding: 5.234vh 4.854vw 5.234vh 4.854vw;
}

footer>div:first-child {
	display: grid;
	grid-template-columns: 1fr 5.825vw 1fr;
	grid-template-rows: fit-content() 1fr fit-content() 2fr 0.545vh 2fr;
	row-gap: 3.053vh;
}

footer::before {
	content: "";
	background-color: var(--accent);
	width: 100%;
	height: 10vh;
	z-index: -1;
	position: absolute;
	top: -9vh;
}

footer .branding {
	grid-row: 1;
	grid-column: span 3;
}

footer .name {
	font-size: 3.883vw;
	color: var(--primary-inv);
}

footer a:hover,
footer a>span:hover {
	color: var(--globe-color);
}

.contacts {
	grid-area: contacts;
	flex-direction: column;
	gap: 2.617vh;
	grid-row: 2;
	grid-column: 1;
}

.contacts span {
	font-size: var(--navigation);
	text-transform: uppercase;
	color: var(--secondary-inv);
	font-family: "Muller";
}

.contacts div {
	flex-direction: column;
	display: flex;
}

.contacts a {
	text-decoration: none;
	font-size: var(--navigation);
	color: var(--tetriary-inv);
	font-family: "Muller";
}

.links {
	flex-direction: column;
	grid-row: 3;
	grid-column: 1;
	gap: 3.053vh;
}

.linked {
	gap: 0.436vh;
	flex-direction: column;
}

.linked a {
	height: fit-content;
	align-items: center;
	gap: 1.942vw;
	text-decoration: none;
	font-size: var(--navigation);
	font-family: "Muller";
	color: var(--secondary-inv);
}

.linked a svg {
	width: 4.369vw;
	fill: var(--accent);
	background-color: var(--primary-inv);
	border-radius: 100%;
	padding: 0.728vw;
	height: auto;
}

footer .linked a:last-child svg {
	width: 3.277vw;
	padding: 1.274vw;
}

footer>div:first-child>div:nth-child(3) {
	grid-row: 3;
	grid-column: 1;
}

footer>div:first-child>div:nth-child(4) {
	grid-row: 4;
	grid-column: 1;
}

.navigation {
	font-family: "Muller";
	grid-column: 3;
	grid-row: span 3;
	font-size: var(--navigation);
	flex-direction: column;
	gap: 2.617vh;
}

.navigation span {
	text-transform: uppercase;
	color: var(--secondary-inv);
}

.navigation div {
	flex-direction: column;
	gap: 0.872vh;
}

.navigation a {
	text-decoration: none;
	color: var(--tetriary-inv);
}

.madeby {
	flex-direction: column;
	gap: 0.872vh;
	row-gap: 4;
	grid-row: 5;
	grid-column: span 3;
	font-family: "Muller";
	font-size: var(--navigation);
}

.madeby span {
	color: var(--secondary-inv);
}

.madeby a {
	color: var(--tetriary-inv);
	text-decoration: none;
}

@media screen and (orientation: landscape) {
	.content {
		border-radius: 0 0 3.906vw 3.906vw;
		position: relative;
		width: 100%;
	}

	.scene {
		height: 91.133vh;
		border-radius: 0 0 3.906vw 3.906vw;
		justify-content: center;
		align-items: end;
		width: 100%;
	}

	.marker {
		bottom: 3.486vh;
		right: 7.524vw;
		gap: 0.625vw;
	}

	.marker img {
		width: 2.404vh;
		padding: 0.24vh 0.391vw;
	}

	.marker span {
		font-size: var(--h3);
	}

	.title {
		border-radius: 0 14.866vw 14.866vw 0;
		top: 14.904vh;
		padding: 1.563vh 1.094vw 1.563vh 0;
	}

	.title span {
		font-size: var(--h1);
		padding: 1.202vh 5.234vw 1.202vh 2.578vw;
	}

	main {
		padding: 9.615vh 2.5vw 20.192vh 2.5vw;
	}

	.event-title {
		margin-bottom: 6.971vh;
	}

	.items {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 2.5vw;
		row-gap: 9.615vh;
		justify-content: space-between;
		width: 100%;
	}

	.item {
		gap: 3.846vh;
		width: calc(50vw - 2.5vw * 2 + 0.586vw);
	}

	.preview {
		width: 100%;
	}

	.preview img {
		border-radius: 3.623vw;
	}

	.item-content {
		gap: 2.404vh;
	}

	.item-name {
		font-size: var(--h3);
	}

	.item-data {
		gap: 0.962vh;
	}

	.item-data span {
		font-size: var(--text-small);
	}

	.item-where {
		gap: 0.313vw;
	}

	.item-where img {
		width: 0.703vw;
		padding: 0.16vh 0.26vw;
	}

	.item-when {
		gap: 0.313vw;
	}

	.item-when img {
		width: 1.016vw;
		padding: 0.104vw;
	}

	.item-description {
		display: unset;
		flex-direction: unset;
	}

	.item-contacts a span:hover {
		color: var(--accent);
	}

	.item-vk {
		gap: 0.625vw;
	}

	.item-vk img {
		width: 1.797vw;
		padding: 0.03vh 0.059vw;
	}

	.item-site {
		gap: 0.625vw;
	}

	.item-site img {
		width: 1.563vw;
		padding: 0.156vw;
	}

	/* footer */

	footer {
		padding: 6.01vh 2.5vw 7.212vh 2.5vw;
	}

	footer>div:first-child {
		grid-template-columns: fit-content(17.5vw) 3.125vw fit-content(23.438vw) 3.75vw 1fr 1fr;
		grid-template-rows: 1fr 1fr 2.163vh 1fr;
		row-gap: 0;
	}

	footer .branding {
		grid-row: 1;
		grid-column: span 3;
	}

	footer .name {
		font-size: 1.563vw;
	}

	.contacts {
		gap: 2.617vh;
		grid-row: 2;
		grid-column: 1;
		height: 100%;
		justify-content: end;
	}

	.contacts span {
		display: none;
	}

	.contacts a {
		color: var(--secondary-inv);
	}

	.navigation {
		grid-column: 5;
		grid-row: span 4;
		width: 100%;
	}

	.links {
		gap: 3.125vw;
		flex-direction: row;
		grid-row: 2;
		grid-column: 1;
		width: 100%;
		height: 100%;
		align-items: end;
	}

	.linked a {
		gap: 0.625vw;
		color: var(--tetriary-inv);
	}

	.linked a svg {
		width: 1.406vw;
		padding: 0.234vw;
	}

	footer .linked a:last-child svg {
		width: 1.055vw;
		padding: 0.41vw;
	}

	footer>div:first-child>div:nth-child(3) {
		grid-row: 4;
		grid-column: 1;
		text-wrap: nowrap;
		word-wrap: nowrap;
	}

	footer>div:first-child>div:nth-child(4) {
		grid-row: 4;
		grid-column: 3;
	}

	#town-group {
		display: none;
	}

	#town-group-desc {
		display: block;
	}

	.madeby {
		grid-row: 2;
		grid-column: 3;
		width: 100%;
		height: 100%;
		justify-content: end;
	}

	.madeby span:nth-child(1) {
		display: block;
		color: var(--secondary-inv);
	}

	.madeby span:nth-child(2) {
		display: none;
	}

	.madeby a {
		display: none;
	}

	#suvorov {
		display: block;
		width: 31.25vw;
		height: auto;
		position: absolute;
		bottom: calc(3px + 40px + 7.212vh);
		right: 0;
	}

	#menu {
		display: none;
	}
}