@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 300;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-light.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 400;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 400;
	font-style: italic;
	src: url('/yastatic/s3/home/fonts/ys/4/text-regular-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 500;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-medium.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 700;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-bold.woff2') format('woff2');
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* outline: 1px solid #f00; */
}

:root {
	--col-white: #fff;
	--col-black: #000;
	--col-red: #f33;

	--col-lightgrey: #efece9;
	--col-grey: #cfccc9;
	--col-middlegrey: #9f9c99;
	--col-darkgrey: #6f6c69;

	--col-opacity-25: #0003;
	--col-opacity-50: #0009;
	--col-opacity-red: #f003;

	--size-font: 16px;
	--width: min(790px, calc(100% - 2rem));
	--width-card: min(500px, calc(100% - 2rem));

	@media (max-width: 600px) {
		--size-font: 14px;
		--width-card: min(500px, calc(100% - 1rem));
	}
}

html {
	font-family: 'ys', sans-serif;
	font-weight: 400;
	font-size: var(--size-font);
}

#rs-root {
	font-size: 1rem;
	line-height: 1.5rem;

	background-color: var(--col-white);
	color: var(--col-black);

	position: relative;
	padding-block: 9rem 3rem;

	img, svg {
		display: block;
		width: 100%;
		height: auto;
	}

	input, button, select, option {
		font-family: inherit;
		font-size: .85rem;
		line-height: 1rem;
	}
}

.rs-text {
	width: var(--width);
	margin: 1.5rem auto;
}

.rs-h1 {
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 2.5rem;
	text-wrap: balance;

	margin: 0 auto;
}

.rs-h2 {
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.5rem;
	text-wrap: balance;

	margin: 0 auto;
}

.rs-h3 {
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.5rem;
	text-wrap: balance;

	margin: 0 auto;
}

.rs-source {
	color: var(--col-black);
	opacity: .35;

	margin-top: 3rem;
}

.rs-cast em {
	color: var(--col-black);
	opacity: .35;
}

.rs-figure {
	&.rs-item {
		border-radius: .5rem;

		overflow: hidden;
		position: relative;
		min-height: 100px;
		max-height: calc(100vh - 15rem);

		.rs-figure__loader {
			background-color: var(--col-lightgrey);
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cstyle%3Epath%7Btransform-origin: 50%25 50%25;animation: rotate 1s linear infinite;%7D @keyframes rotate%7Bfrom %7Btransform: rotate(0)%7D to %7Btransform: rotate(90deg)%7D%7D%3C/style%3E%3Cpath fill='%23cfccc9' d='M48,27.3v-4.7l-8.5-1.6-1.5-3.5,4.8-7.1-3.3-3.3-7.1,4.8-3.5-1.5-1.6-8.5h-4.7l-1.6,8.5-3.5,1.5-7.1-4.8-3.3,3.3,4.8,7.1-1.5,3.5-8.5,1.6v4.7l8.5,1.6,1.5,3.5-4.8,7.1,3.3,3.3,7.1-4.8,3.5,1.5,1.6,8.5h4.7l1.6-8.5,3.5-1.5,7.1,4.8,3.3-3.3-4.8-7.1,1.5-3.5,8.5-1.6ZM25,32l-7-7,7-7,7,7-7,7Z'/%3E%3C/svg%3E%0A");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 50px 50px;

			width: 100%;
			min-height: 100px;
			max-height: calc(100vh - 15rem);
		}

		.rs-figure__back {
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100% 100%;

			img {
				backdrop-filter: blur(10px);
				border-radius: .5rem;

				width: 100%;
				min-height: 100px;
				max-height: calc(100vh - 15rem);
				object-fit: contain;
				object-position: center;
			}
		}

		figcaption {
			font-weight: 300;
			font-size: .6rem;
			line-height: 1rem;

			background-color: var(--col-black);
			color: var(--col-white);
			opacity: .5;
			border-top-right-radius: .5rem;

			position: absolute;
			bottom: 0;
			padding: 0 .5rem;

			a {
				text-decoration: none;
				color: var(--col-white);
			}
		}
	}
}

.rs-share {
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	gap: 1rem;
	justify-content: center;
	width: var(--width);
	margin: 3rem auto;

	li {
		a {
			border-radius: 50%;

			overflow: hidden;
			display: block;
			width: 40px;
			height: 40px;

			&:hover {
				background-color: var(--col-black);
			}

			img {
				mix-blend-mode: difference;
			}
		}
	}
}

.rs-intro {
	--col-green: #396;
	--col-yellow: #f90;
	--col-violet: #c6c;

	display: flex;
	flex-flow: column;
	align-items: center;

	.rs-intro__control {
		cursor: pointer;

		font-size: .85rem;
		line-height: 1rem;
		letter-spacing: .1rem;
		text-transform: uppercase;

		color: var(--col-grey);
		background-color: var(--col-white);
		border: none;
		border-radius: .5rem;

		user-select: none;
		z-index: 999;
		position: sticky;
		top: 1rem;
		margin: 0 auto;
		padding: .5rem 1rem;
	}

	.rs-intro__content {
		display: none;
		margin-top: -3rem;

		&.active {
			display: block;
		}
	}

	.rs-callscroll {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'%3E%3Cpath stroke='%23bbb' stroke-width='2' fill='none' stroke-linecap='round' d='M5 4 L15 14 L25 4'/%3E%3C/svg%3E");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		user-select: none;
		z-index: 9;
		position: sticky;
		bottom: 1rem;
		margin: 0 auto;
		padding: .5rem 1rem;
		width: 30px;
		height: 15px;
		transform: translateY(-10px);
		animation: call .5s ease-in infinite alternate;
	}
}

@keyframes call {
	0% { transform: translateY(-10px) }
	100% { transform: translateY(0px) }
}

.rs-intro__viz {
	z-index: 9;
	position: sticky;
	top: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	padding: 0;

	svg {
		width: min(100vmin - 2rem, 790px);
		height: min(100vmin - 2rem, 790px);

		.rs-sample {
			text {
				font-weight: 500;
				font-size: .85rem;
				fill: var(--col-black);

				&.rs-left {
					font-weight: 400;
					font-size: .65rem;
					text-anchor: end;
					fill: var(--col-middlegrey);
				}

				&.rs-right {
					font-weight: 400;
					font-size: .65rem;
					fill: var(--col-middlegrey);
				}
			}
		}

		.rs-layer {
			opacity: 0;
			transform-origin: 395px 395px;
			scale: 1;
			transition: all .5s ease;

			.rs-dots {
				fill: none;
				stroke-width: 6;
				stroke-linecap: round;
			}

			&.rs-layer-0 { opacity: 1; scale: 1; fill: var(--col-lightgrey); }
			&.rs-layer-1 { opacity: 0; scale: 1; fill: var(--col-green); }
			&.rs-layer-2 { opacity: 0; scale: 0.37; .rs-dots { stroke-width: 2.5; stroke: var(--col-yellow); } }
			&.rs-layer-3 { opacity: 0; .rs-dots { stroke: var(--col-red); } }
			&.rs-layer-4 { opacity: 0; .rs-dots { stroke: var(--col-green); } }
			&.rs-layer-5 { opacity: 0; .rs-dots { stroke: var(--col-violet); } }
			&.rs-layer-6 { opacity: 0; fill: var(--col-red); }
			&.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-0 {
			.rs-layer-0 { opacity: 1; }
			.rs-layer-1 { opacity: 0; }
			.rs-layer-2 { opacity: 0; }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-1 {
			.rs-layer-0 { opacity: 1; }
			.rs-layer-1 { opacity: 1; }
			.rs-layer-2 { opacity: 0; }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-2 {
			.rs-layer-0 { opacity: 0; scale: 2.7; }
			.rs-layer-1 { opacity: 1; scale: 2.7; }
			.rs-layer-2 { opacity: 1; scale: 1; }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-3 {
			.rs-layer-0 { opacity: 0; scale: 5.4; }
			.rs-layer-1 { opacity: 0; scale: 5.4; }
			.rs-layer-2 { opacity: 1; scale: 2; }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-4 {
			.rs-layer-0 { opacity: 0; scale: 5.4; }
			.rs-layer-1 { opacity: 0; scale: 5.4; }
			.rs-layer-2 { opacity: 1; scale: 2; .rs-dots { stroke: var(--col-lightgrey); } }
			.rs-layer-3 { opacity: 1; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-5 {
			.rs-layer-0 { opacity: 0; scale: 5.4; }
			.rs-layer-1 { opacity: 0; scale: 5.4; }
			.rs-layer-2 { opacity: 1; scale: 2; .rs-dots { stroke: var(--col-lightgrey); } }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 1; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-6 {
			.rs-layer-0 { opacity: 0; scale: 5.4; }
			.rs-layer-1 { opacity: 0; scale: 5.4; }
			.rs-layer-2 { opacity: 1; scale: 2; .rs-dots { stroke: var(--col-lightgrey); } }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 1; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-7 {
			.rs-layer-0 { opacity: 0; scale: 5.4; }
			.rs-layer-1 { opacity: 0; scale: 5.4; }
			.rs-layer-2 { opacity: 1; scale: 2; .rs-dots { stroke: var(--col-lightgrey); } }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 1; }
			.rs-layer-7 { opacity: 0; }
		}

		&.rs-step-8 {
			.rs-layer-0 { opacity: 0; scale: 5.4; }
			.rs-layer-1 { opacity: 0; scale: 5.4; }
			.rs-layer-2 { opacity: 0; scale: 2; .rs-dots { stroke: var(--col-lightgrey); } }
			.rs-layer-3 { opacity: 0; }
			.rs-layer-4 { opacity: 0; }
			.rs-layer-5 { opacity: 0; }
			.rs-layer-6 { opacity: 0; }
			.rs-layer-7 { opacity: 1; }
		}
	}
}

.rs-step {
	pointer-events: none;
	z-index: 99;
	position: relative;
	width: 100vw;
	padding: 50vh 0;

	&:nth-of-type(2) {
		padding-top: 0;
	}

	&:last-of-type {
		padding-bottom: 100vh;
	}

	.rs-step__content {
		background-color: var(--col-white);
		border-radius: 1rem;
		box-shadow: 0 .5rem 2rem var(--col-opacity-25);

		width: var(--width-card);
		margin: 0 auto;
		padding: 1rem;

		span {
			color: var(--col-white);
			border-radius: .5rem;
			padding: .1rem .5rem .2rem .5rem;

			&.rs-green {
				background-color: var(--col-green);
			}

			&.rs-yellow {
				background-color: var(--col-yellow);
			}

			&.rs-red {
				background-color: var(--col-red);
			}

			&.rs-violet {
				background-color: var(--col-violet);
			}
		}
	}
}

.rs-masonry-container {
	display: flex;
	flex-flow: column;
	min-height: max(75dvh, 400px);
	margin: 0 0 6rem 0;

	.rs-masonry {
		user-select: none;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		gap: 1rem;
		margin: 3rem 2rem;

		@media (max-width: 600px) {
			gap: .5rem;
			margin: 3rem .5rem;
		}

		.rs-masonry-empty {
			font-size: 1.5rem;
			line-height: 2rem;

			color: var(--col-middlegrey);

			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			min-height: 50vh;
		}
	}

	.rs-home {
		cursor: pointer;

		border-radius: .5rem;
		background-color: var(--col-black);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15,5L15,25M21,11L15,5L9,11'/%3E%3C/svg%3E");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 30px 30px;
		border: none;
		border-radius: .5rem;

		position: fixed;
		bottom: -4rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;

		transition: bottom .2s ease;

		&:active {
			transform: translateY(2px);
		}

		&.active {
			bottom: 1rem;
		}
	}
}

.rs-filters {
	user-select: none;

	z-index: 99;
	position: sticky;
	top: 0;
	left: 0;

	.rs-filters__block {
		overflow: hidden;

		background-color: var(--col-lightgrey);
		border-radius: 1rem;

		width: var(--width);
		margin: 68px auto 2rem;
		padding: 1rem;

		transition: box-shadow .2s ease-in-out;

		@media (max-width: 800px) {
			margin: 68px auto 1rem auto;
		}

		&.rs-closed {
			height: 4rem;

			.rs-button__close {
				transform: rotate(45deg);
			}
		}

		.rs-filters__flow {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			gap: 1rem;

			@media (max-width: 800px) {
				flex-flow: row wrap;
			}

			.rs-group-min {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				gap: 1rem;

				@media (max-width: 800px) {
					width: 100%;
				}
			}

			.rs-button__reset {
				cursor: pointer;

				background-color: var(--col-black);
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M6,15c0,4.97,4.03,9,9,9s9-4.03,9-9-4.03-9-9-9'/%3E%3Cpolygon fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' points='3 15 6 10 9 15 3 15'/%3E%3C/svg%3E");
				background-position: center center;
				background-size: 75% 75%;
				background-repeat: no-repeat;
				border: none;
				border-radius: .5rem;

				flex: 0 0 2rem;
				width: 2rem;
				height: 2rem;

				&:active {
					transform: translateY(2px);
				}

				&:disabled {
					pointer-events: all;
					opacity: .25;

					&:active {
						transform: none;
					}
				}
			}

			.rs-search {
				font-size: .85rem;
				line-height: 1rem;

				appearance: none;

				background-color: var(--col-white);
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23000' stroke-width='2'%3E%3Ccircle fill='none' cx='9' cy='9' r='5'/%3E%3Cline stroke-linecap='round' x1='16' y1='16' x2='13' y2='13'/%3E%3C/svg%3E");
				background-position: center right 5px;
				background-repeat: no-repeat;
				background-size: 20px 20px;
				border: 1px solid var(--col-grey);
				border-radius: .5rem;

				flex: 1 1 200px;
				width: 100%;
				height: 2rem;
				padding: 0 30px 0 .5rem;

				&::placeholder {
					color: var(--col-black);
					opacity: .35;
				}
			}

			.rs-button__close {
				cursor: pointer;

				background-color: transparent;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M5,5L25,25M5,25L25,5'/%3E%3C/svg%3E");
				background-position: center center;
				background-size: 75% 75%;
				background-repeat: no-repeat;
				border: none;
				border-radius: 50%;

				flex: 0 0 2rem;
				width: 2rem;
				height: 2rem;
				transition: transform .2s ease-in-out;

				&:active {
					transform: none;
				}
			}

			select {
				cursor: pointer;

				font-size: .85rem;
				line-height: 1rem;

				appearance: none;

				color: var(--col-black);
				background-color: var(--col-white);
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23000' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5,8L10,13L15,8'/%3E%3C/svg%3E");
				background-size: 20px 20px;
				background-repeat: no-repeat;
				background-position: center right 5px;
				border: 1px solid var(--col-grey);
				border-radius: .5rem;

				flex: 1 1 200px;
				width: 100%;
				height: 2rem;
				padding: 0 30px 0 .5rem;

				@media (max-width: 800px) {
					flex: 1 1 800px;
				}
			}

			.rs-favourites {
				cursor: pointer;

				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				gap: .5rem;

				input {
					cursor: pointer;

					-moz-appearance: none;
					-webkit-appearance: none;
					appearance: none;

					background-color: var(--col-white);
					background-image: none;
					background-size: cover;
					border: 1px solid var(--col-grey);
					border-radius: .25rem;

					width: 20px;
					height: 20px;
					margin: 0;

					&:checked {
						background-color: var(--col-black);
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4,10L9,15L17,3'/%3E%3C/svg%3E");
						border: 1px solid var(--col-black);
					}
				}
			}
		}

		.rs-message {
			cursor: pointer;

			font-size: .85rem;
			line-height: 1rem;
			text-align: left;

			background-color: var(--col-opacity-red);
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10,10L20,20M20,10L10,20'/%3E%3C/svg%3E");
			background-position: right center;
			background-size: 30px 30px;
			background-repeat: no-repeat;
			border: none;

			border-radius: .5rem;

			width: 100%;
			margin-top: 1rem;
			padding: .5rem 30px .5rem 1rem;

			span {
				font-weight: 500;
			}
		}
	}

	&.sticked {
		.rs-filters__block {
			background-color: var(--col-white);
			box-shadow: 0 .5rem 2rem var(--col-opacity-25);
		}
	}
}

.rs-card {
	text-decoration: none;
	color: var(--col-black);

	background-color: var(--col-lightgrey);
	border-radius: 1rem;

	position: relative;
	display: flex;
	flex-flow: column;
	width: 250px;

	transition: transform .2s ease-out;

	@media (max-width: 600px) {
		border-radius: .5rem;
		width: 175px;
	}

	&.rs-card_liked::after {
		content: '';

		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath fill='%23f33' d='M2,25.17V4c0-1.1.9-2,2-2h12c1.1,0,2,.9,2,2v21.17c0,1.78-2.15,2.67-3.41,1.41l-3.17-3.17c-.78-.78-2.05-.78-2.83,0l-3.17,3.17c-1.26,1.26-3.41.37-3.41-1.41Z'/%3E%3C/svg%3E");
		background-position: top left;
		background-repeat: no-repeat;
		background-size: cover;

		filter: drop-shadow(2px 2px 2px var(--col-opacity-25));

		position: absolute;
		top: 0;
		right: 1.5rem;
		width: 20px;
		height: 30px;

		transform: translate(0, -6px);
	}

	&:hover {
		transform: scale(1.05);

		@media (max-width: 600px) {
			transform: scale(1);
		}

		.rs-card__raster {
			transform: scale(1.1);
		}
	}

	.rs-card__raster-wrapper {
		border-radius: 1rem 1rem 0 0;

		overflow: hidden;
		width: 100%;
		aspect-ratio: 1;

		@media (max-width: 600px) {
			border-radius: .5rem .5rem 0 0;
		}

		.rs-card__raster {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cstyle%3Epath%7Btransform-origin: 50%25 50%25;animation: rotate 1s linear infinite;%7D @keyframes rotate%7Bfrom %7Btransform: rotate(0)%7D to %7Btransform: rotate(90deg)%7D%7D%3C/style%3E%3Cpath fill='%23cfccc9' d='M48,27.339v-4.677l-8.463-1.625l-1.453-3.515l4.831-7.128l-3.308-3.308l-7.128,4.831l-3.515-1.453L27.339,2h-4.677l-1.625,8.463l-3.515,1.453l-7.128-4.831l-3.308,3.308l4.831,7.128l-1.453,3.515L2,22.661v4.677l8.463,1.625l1.453,3.515l-4.831,7.128l3.308,3.308l7.128-4.831l3.515,1.453L22.661,48h4.677l1.625-8.463l3.515-1.453l7.128,4.831l3.308-3.308l-4.831-7.128l1.453-3.515L48,27.339z M25,30c-2.761,0-5-2.239-5-5s2.239-5,5-5s5,2.239,5,5S27.761,30,25,30z'/%3E%3C/svg%3E%0A");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 50px 50px;

			width: 100%;
			aspect-ratio: 1;
			object-fit: cover;
			object-position: center center;

			transition: transform .2s ease-out;
		}
	}

	.rs-card__name {
		font-size: 1rem;
		line-height: 1.25rem;

		flex: 1 0 1.25rem;
		padding: 1rem;

		@media (max-width: 600px) {
			padding: .75rem;
		}
	}

	.rs-card__geo {
		font-size: .85rem;
		line-height: 1rem;

		border-top: 1px solid var(--col-middlegrey);
		opacity: .35;

		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		gap: 1rem;
		margin: 0 1rem;
		padding: .25rem 0 .35rem 0;

		.rs-card__geo__region {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		@media (max-width: 600px) {
			margin: 0 .75rem;
		}
	}
}

.rs-modal {
	background-color: var(--col-opacity-50);
	backdrop-filter: blur(10px);
	opacity: 0;

	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding-block: 68px 1rem;

	animation: fade-in .25s forwards ease;

	.rs-modal__card {
		font-size: 1rem;
		line-height: 1.5rem;

		background-color: var(--col-white);
		border-radius: 1.5rem;

		overflow: auto;
		position: relative;
		display: flex;
		flex-flow: column;
		width: var(--width-card);
		max-height: calc(100dvh - 68px - 1rem);

		.rs-modal__card__name {
			font-size: 1.2rem;
			line-height: 1.5rem;
			padding: 0 1rem 1rem 1rem;
		}

		.rs-modal__card__description {
			font-size: .85rem;
			line-height: 1.2rem;

			hyphens: auto;
			hyphenate-limit-chars: 6 3 3;
			hyphenate-limit-lines: 2;
			hyphenate-limit-last: always;
			-webkit-hyphens: auto;
			-webkit-hyphenate-limit-chars: 6 3 3;
			-webkit-hyphenate-limit-lines: 2;
			-webkit-hyphenate-limit-last: always;

			color: var(--col-black);
			padding: 0 1rem 1rem 1rem;
		}

		.rs-modal__card__group {
			user-select: none;
			font-size: .85rem;
			line-height: 1.25rem;

			display: flex;
			flex-flow: row nowrap;
			gap: 1rem;
		}

		.rs-modal__card__params {
			user-select: none;
			font-size: .85rem;
			line-height: 1.25rem;

			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			gap: 1rem;
			padding: 0 1rem 1rem 1rem;

			a {
				text-decoration: none;

				color: var(--col-black);
				opacity: .5;

				display: flex;
				flex-flow: row nowrap;
				align-items: start;
				gap: .25rem;

				&::before {
					content: '';

					background-position: center center;
					background-repeat: no-repeat;
					background-size: 20px 20px;

					flex: 0 0 20px;
					display: block;
					width: 20px;
					height: 20px;
				}

				&.rs-modal__card__address {
					&::before {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M9.88,3c-3.85.06-7.01,3.41-6.88,7.25.1,2.77,1.81,5.13,4.22,6.17,1.05.45,1.77,1.43,1.77,2.57h0c0,.56.45,1.01,1,1.01s1-.45,1-1c0-1.14.72-2.13,1.77-2.58,2.49-1.07,4.23-3.54,4.23-6.42,0-3.91-3.2-7.06-7.12-7ZM10,13c-1.66,0-3-1.34-3-3s1.34-3,3-3,3,1.34,3,3-1.34,3-3,3Z'/%3E%3C/svg%3E");
					}

					&:hover {
						opacity: 1;

						&::before {
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23f33' d='M9.88,3c-3.85.06-7.01,3.41-6.88,7.25.1,2.77,1.81,5.13,4.22,6.17,1.05.45,1.77,1.43,1.77,2.57h0c0,.56.45,1.01,1,1.01s1-.45,1-1c0-1.14.72-2.13,1.77-2.58,2.49-1.07,4.23-3.54,4.23-6.42,0-3.91-3.2-7.06-7.12-7ZM10,13c-1.66,0-3-1.34-3-3s1.34-3,3-3,3,1.34,3,3-1.34,3-3,3Z'/%3E%3C/svg%3E");
						}
					}
				}

				&.rs-modal__card__nearby {
					&::before {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12,10c-.04,3.79-5.62,2.61-4.54-1.05.33-1.1,1.47-1.95,2.71-1.96,1.34-.06,1.46,1.93.12,2.04-.53-.07-1.09-.08-1.45.5-.7,1.07.55,2.52,1.82,2.09.67-.18,1.25-.82,1.33-1.62h0Z'/%3E%3Cpath d='M14.5,10c.11,1.78-.97,3.61-2.68,4.39-3.92,1.89-8.27-2.29-6.67-6.4.69-1.97,2.7-3.45,4.9-3.49,1.32-.01,1.37,1.94.05,2-1.42-.13-2.92.67-3.57,2.06-1.56,3.08,1.81,6.64,5.09,5.36,1.59-.54,2.81-2.14,2.87-3.93h.01Z'/%3E%3Cpath d='M17,10c.12,2.76-1.59,5.55-4.23,6.7C6.79,19.44.39,13.2,2.84,7.04c1.06-2.89,4.02-5,7.19-5.03,1.32,0,1.34,1.96.03,2-2.39-.14-4.83,1.32-5.84,3.61-1.05,2.23-.6,5.13,1.18,6.99,4.01,4.34,11.49,1.38,11.6-4.6h0Z'/%3E%3C/svg%3E");
					}

					&:hover {
						opacity: 1;

						&::before {
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f33'%3E%3Cpath d='M12,10c-.04,3.79-5.62,2.61-4.54-1.05.33-1.1,1.47-1.95,2.71-1.96,1.34-.06,1.46,1.93.12,2.04-.53-.07-1.09-.08-1.45.5-.7,1.07.55,2.52,1.82,2.09.67-.18,1.25-.82,1.33-1.62h0Z'/%3E%3Cpath d='M14.5,10c.11,1.78-.97,3.61-2.68,4.39-3.92,1.89-8.27-2.29-6.67-6.4.69-1.97,2.7-3.45,4.9-3.49,1.32-.01,1.37,1.94.05,2-1.42-.13-2.92.67-3.57,2.06-1.56,3.08,1.81,6.64,5.09,5.36,1.59-.54,2.81-2.14,2.87-3.93h.01Z'/%3E%3Cpath d='M17,10c.12,2.76-1.59,5.55-4.23,6.7C6.79,19.44.39,13.2,2.84,7.04c1.06-2.89,4.02-5,7.19-5.03,1.32,0,1.34,1.96.03,2-2.39-.14-4.83,1.32-5.84,3.61-1.05,2.23-.6,5.13,1.18,6.99,4.01,4.34,11.49,1.38,11.6-4.6h0Z'/%3E%3C/svg%3E");
						}
					}
				}
			}
		}

		.rs-modal__card__controls {
			background-color: var(--col-white);

			position: sticky;
			bottom: 0;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			padding: 1rem;

			&:before {
				content: "";

				border-top: 1px solid var(--col-grey);

				position: absolute;
				top: 0;
				left: 1rem;
				right: 1rem;

				background-color: rgba(0, 0, 0, .5);
			}

			.rs-group__checks {
				gap: 1rem;
			}

			.rs-group__buttons {
				gap: .5rem;
			}

			button {
				cursor: pointer;

				background-color: var(--col-black);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 50px 30px;
				border: none;
				border-radius: .5rem;

				flex: 0 0 50px;
				width: 50px;
				height: 30px;
				margin: 0;

				&:active {
					transform: translateY(2px);
				}

				&.rs-modal__card__prev {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5,15L25,15M11,9L5,15L11,21'/%3E%3C/svg%3E");
				}

				&.rs-modal__card__next {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5,15L25,15M19,9L25,15L19,21'/%3E%3C/svg%3E");
				}
			}

			label {
				cursor: pointer;

				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				gap: .5rem;

				input {
					cursor: pointer;

					-moz-appearance: none;
					-webkit-appearance: none;
					appearance: none;

					background-size: cover;
					border: none;

					width: 20px;
					height: 30px;
					margin: 0;
				}

				&.rs-modal__card__like {
					&::after {
						content: "В избранное";
					}

					&:has(input:checked) {
						&::after {
							content: "Добавлено";
						}
					}

					input {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M2,24V7c0-1.1.9-2,2-2h12c1.1,0,2,.9,2,2v17c0,1.78-2.15,2.67-3.41,1.41l-3.17-3.17c-.78-.78-2.05-.78-2.83,0l-3.17,3.17c-1.26,1.26-3.41.37-3.41-1.41Z'/%3E%3C/svg%3E");

						&:checked {
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath fill='%23f33' stroke='%23f33' stroke-width='2' d='M2,24V7c0-1.1.9-2,2-2h12c1.1,0,2,.9,2,2v17c0,1.78-2.15,2.67-3.41,1.41l-3.17-3.17c-.78-.78-2.05-.78-2.83,0l-3.17,3.17c-1.26,1.26-3.41.37-3.41-1.41Z'/%3E%3C/svg%3E");
						}
					}
				}

				&.rs-modal__card__link {
					&::after {
						content: "Ссылка";
					}

					&:has(input:checked) {
						&::after {
							content: "Скопирована";
						}
					}

					input {
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' stroke-linejoin='round' stroke='%23000' stroke-width='2' fill='none'%3E%3Crect x='1' y='9' width='12' height='16' rx='2' ry='2'/%3E%3Cpath d='M15,21h2c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2h-8c-1.1,0-2,.9-2,2'/%3E%3C/svg%3E");

						&:checked {
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' stroke-linejoin='round' stroke='%2309f' stroke-width='2' fill='none'%3E%3Crect x='1' y='9' width='12' height='16' rx='2' ry='2'/%3E%3Cpath d='M15,21h2c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2h-8c-1.1,0-2,.9-2,2'/%3E%3Cpolyline stroke-linecap='round' points='4 17 6 20 10 14'/%3E%3C/svg%3E");
						}
					}
				}
			}
		}

		.rs-modal__card__close {
			cursor: pointer;

			background-color: var(--col-white);
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' d='M10,10L20,20M10,20L20,10'/%3E%3C/svg%3E");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 30px 30px;
			border: none;
			border-radius: 0 0 0 1.5rem;

			position: absolute;
			top: 0;
			right: 0;
			width: calc(30px + 1rem);
			height: calc(30px + 1rem);

			&:active {
				transform: none;
			}

			&::before, &::after {
				content: '';

				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M0,0v10h10C4,10,0,6,0,0Z'/%3E%3C/svg%3E");
				background-size: cover;

				position: absolute;
				display: block;
				width: 10px;
				height: 10px;
			}

			&::before {
				top: 0;
				left: 0;
				transform: translate(-100%, 1rem) rotate(180deg);
			}

			&::after {
				bottom: 0;
				right: 0;
				transform: translate(-1rem, 100%) rotate(180deg);
			}
		}
	}
}

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.rs-gallery {
	user-select: none;
	position: relative;
	margin: 1rem;

	.rs-item {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.rs-prev, .rs-next {
		cursor: pointer;

		background-color: var(--col-white);
		background-position: center center;
		background-size: 30px 30px;
		background-repeat: no-repeat;
		border: none;

		position: absolute;
		top: 50%;
		width: 30px;
		height: 50px;
		padding: 0;
		transform: translateY(-50%);

		&::before, &::after {
			content: '';

			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M0,0v10h10C4,10,0,6,0,0Z'/%3E%3C/svg%3E");
			background-size: cover;

			position: absolute;
			display: block;
			width: 10px;
			height: 10px;
		}
	}

	.rs-prev {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15,8L8,15L15,22'/%3E%3C/svg%3E");
		border-radius: 0 30px 30px 0;
		left: 0;

		&::before {
			top: 0;
			left: 0;
			transform: translate(0, -100%);
		}

		&::after {
			bottom: 0;
			left: 0;
			transform: translate(0, 100%) rotate(90deg);
		}
	}

	.rs-next {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15,8L22,15L15,22'/%3E%3C/svg%3E");
		border-radius: 30px 0 0 30px;
		right: 0;

		&::before {
			top: 0;
			right: 0;
			transform: translate(0, -100%) rotate(270deg);
		}

		&::after {
			bottom: 0;
			right: 0;
			transform: translate(0, 100%) rotate(180deg);
		}
	}

	.rs-crumbs {
		position: absolute;
		bottom: 1rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;

		.rs-crumb {
			cursor: pointer;

			mix-blend-mode: difference;
			background-color: transparent;
			border: 1px solid var(--col-white);
			border-radius: 50%;

			flex: 0 0 10px;
			width: 10px;
			height: 10px;
			margin: 0 .25rem;
			padding: 0;

			&.active {
				cursor: initial;
				background-color: var(--col-white);
				border: 1px solid var(--col-white);
			}
		}
	}
}

.rs-tooltip {
	user-select: none;
	pointer-events: none;

	font-size: .85rem;
	line-height: 1rem;
	text-wrap: balance;
	hyphens: auto;

	color: var(--col-white);
	background-color: var(--col-darkgrey);
	border-radius: .5rem;

	opacity: 0;
	z-index: 999;
	position: absolute;
	width: max-content;
	max-width: 200px;
	padding: .5rem 1rem;

	animation: show .2s .2s forwards ease;

	&::before {
		content: '';

		background-color: var(--col-darkgrey);

		position: absolute;
		top: 0;
		left: .75rem;
		display: block;
		width: 10px;
		height: 10px;
		transform: translate(0, -50%) rotate(45deg);
	}
}

@keyframes show {
	0% { opacity: 0; transform: translateY(5px); }
	100% { opacity: 1; transform: translateY(0); }
}

