.control-sidebar, .sidebar {
	display: unset;
}

.control-sidebar {
	top: 0;
	right: 0;
	transition: color .1s, border-color .1s, transform .2s;
}

.sidebar {
	position: relative;
	display: flex;
	flex-direction: column;
	width: var(--ss);
	background-color: #fafafb;
	box-shadow: #18141f0f 0 0 2px, #18141f1a 0 12px 24px;
	transition: opacity .2s, transform .2s;
	z-index: 2;
}

.sidebar:not(.open) {
	opacity: 0;
	transform: translateX(100%);
}

.sidebar:not(.open) ~ * > .control-overlay {
	transform: translateX(var(--ss));
}

.sidebar:not(.open) ~ * > .control-sidebar {
	transform: translateX(var(--ss)) rotate(180deg);
}

.sidebar > * {
	padding-inline: var(--s4);
}

.sidebar_title {
	margin-block: 0 var(--s4);
	font-size: var(--f2);
	font-weight: 400;
	color: #18141f;
}

.sidebar_content {
	position: relative;
	height: 100%;
	padding-block: var(--s3);
	overflow: auto;
	overflow: overlay;
}

.sidebar_action {
	position: relative;
	margin-top: calc(2px - var(--s3));
	padding-block: var(--s3);
	background-color: inherit;
}

.sidebar_action:empty {
	display: none;
}

.sidebar_action > .button:not(:last-child) {
	margin-bottom: var(--s1);
}

.card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	width: 100%;
	padding: var(--s2);
	background-color: #fff;
	border-radius: var(--r);
	border: 1px solid #18141f26;
	outline: 2px solid transparent;
	font: unset;
	font-size: 1.2rem;
	text-align: unset;
	color: #18141f80;
	cursor: pointer;
	transition: border-color .1s, outline-color .1s;
}

.card:not(:last-child) {
	margin-bottom: var(--s1);
}

.card:focus-visible, .card:hover {
	outline-color: #18141f26;
}

.card.active {
	position: sticky;
	top: calc(2px - var(--s3));
	bottom: 0;
	border-color: #9a4797;
	outline-color: #9a4797;
}

.card_content {
	grid-column: 2;
}

.card > :last-child {
	grid-column: -1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card_title {
	margin-block: 0 var(--s1);
	font-size: var(--f1);
	font-weight: 400;
	color: #18141f;
}

.typology {
	line-height: 3rem;
	margin-bottom: 4px;
	padding-inline: 12px;
	background-color: #f3f3f4;
	border-radius: 12px;
	text-align: center;
	color: #18141fc9;
}

.button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: var(--s2) var(--s4);
	background-color: #9a4797;
	border: unset;
	border-radius: 4px;
	outline: 4px solid transparent;
	font-size: var(--f1);
	text-align: center;
	text-decoration: unset;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, outline-color .2s;
}

.button:hover {
	background-color: #5e2b5c;
}

.button:focus-visible {
	outline-color: #9a47974d;
}

.button:active {
	background-color: #3b1b3a;
}

.modal {
	position: fixed;
	inset: 0;
	background-color: #fff;
}

.control-close {
	top: var(--s4);
	right: var(--s5);
	transition: color .1s, border-color .1s, transform .2s;
}

.image {
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	padding: var(--s4);
}

.image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.control-previous {
	top: 50%;
	left: var(--s5);
	transform: translateY(-50%) rotate(180deg);
}

.control-next {
	top: 50%;
	right: var(--s5);
	transform: translateY(-50%);
}


@media (max-height: 675px) and (min-aspect-ratio: 16 / 9) {
	.viewer {
		justify-content: flex-start;
	}
}

@media (min-width: 1200px) {
	:root {
		--sc: 6rem;
		--ss: 360px;
	}

	@media (min-height: 675px) {
		:root {
			--r: 6px;
			--f1: 1.6rem;
			--f2: 2.4rem;
			--s1: 8px;
			--s2: 12px;
			--s3: 16px;
			--s4: 24px;
			--s5: 36px;
		}

		.ui {
			box-sizing: border-box;
			padding: var(--s5) var(--s4);
		}

		.controls {
			margin: 0 var(--s4) 0 0;
		}

		.control-sidebar, .control-overlay, .control-close, .control-previous, .control-next {
			width: 2.2rem;
			height: 2.2rem;
		}

		.sidebar {
			border-radius: var(--r);
		}

		.sidebar_content {
			margin-top: calc(var(--s3) - 2px);
			padding-top: 2px;
		}

		.card.active {
			top: 0;
		}
	}
}