:root {
	--bg-primary: #0c0c0c;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

button {
	border: 0;

	&:not(:disabled) {
		cursor: pointer;
	}
}

img,
svg {
	max-width: 100%;
	display: block;
}

body {
	display: grid;
	place-items: center;
	min-height: 100svh;
	background-color: var(--bg-primary);
	padding: 1rem;
	font-family: sans-serif;
}

.grid {
	width: min(100%, 1000px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 1rem;
	list-style-type: "";

	.card {
		--radius: 8px;
		--active-inset: 10px;
		border: 0;
		border-radius: var(--radius);
		clip-path: inset(0 round var(--radius));
		transition: clip-path 100ms ease-out;

		&:focus-visible {
			outline: 2px solid canvas;
			outline-offset: -16px;
		}

		&:active {
			clip-path: inset(var(--active-inset) round var(--radius));
		}
	}
}

.modal {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(10px);
	align-content: center;
	padding: 2rem;
	overflow-y: auto;
	transition: all 0.3s linear;

	.modal_overlay {
		position: absolute;
		inset: 0;
		cursor: pointer;
		background-color: transparent;
	}

	.modal_card {
		position: relative;
		background-color: var(--bg-primary);
		padding: 1rem;
		width: min(100%, 1600px);
		margin: auto;
		transition: transform 0.4s ease-in-out;

		@media screen and (min-width: 992px) {
			padding: 2rem;
		}

		.modal_card_slider {
			position: relative;

			.slider_arrow {
				--_button-gap: 0.875rem;
				z-index: 2;
				position: absolute;
				bottom: 0;
				width: 44px;
				aspect-ratio: 1/1;
				border: 0;
				background-color: #fff;
				display: inline-grid;
				place-items: center;
				transition: transform 100ms ease-in-out;
				transform: translateX(var(--_translateX, 0)) scale(var(--_scale, 1));

				@media screen and (max-width: 991.98px) {
					right: 0;
				}
				@media screen and (min-width: 992px) {
					left: calc((100% / 3) * 2);
				}

				&:active {
					--_scale: 0.8;
				}

				&.slider_arrow--prev {
					@media screen and (max-width: 991.98px) {
						--_translateX: calc(-100% - var(--_button-gap));
					}
				}

				&.slider_arrow--next {
					@media screen and (min-width: 992px) {
						--_translateX: calc(100% + var(--_button-gap));
					}
				}
			}
		}

		.modal_card_close {
			position: absolute;
			top: 1rem;
			right: 1rem;
			z-index: 2;
			padding: 0.5rem;
			background-color: transparent;
		}
	}

	&:not(.cc-active) {
		visibility: hidden;
		opacity: 0;
		transition-duration: 0.15s;
		pointer-events: none;

		.modal_card {
			transform: scale(0.7);
			transition-duration: 0.2s;
		}
	}
}

.modal-slider-card {
	color: #ffffff;
	display: grid;
	gap: 1.5rem;
	background-color: var(--bg-primary);

	@media screen and (min-width: 992px) {
		grid-template-columns: 2fr 1fr;
	}

	.modal-slider-card_figure {
		position: relative;
		aspect-ratio: 16/9;
	}

	.modal-slider-card_media {
		background-color: #000;
		border: 0;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.3s linear;
	}

	.modal-slider-card_content {
		@media screen and (max-width: 991.98px) {
			padding-bottom: calc(44px + 1rem);
		}
	}
}

.swiper-slide:not(.swiper-slide-active) {
	.modal-slider-card_media {
		transform: scale(0.5);
		opacity: 0;
		transition-duration: 0.6s;
	}
}