.yokuchi-inspiration {
	width: 100%;
	overflow: hidden;
	background: transparent;
}

.yokuchi-inspiration__container {
	display: grid;

	grid-template-columns:
		minmax(220px, 280px)
		minmax(0, 1fr);

	column-gap: 55px;
	row-gap: 36px;

	width: 100%;
	max-width: 1440px;

	margin: 0 auto;
}

/* =========================
   LEWA KOLUMNA
   ========================= */

.yokuchi-inspiration__left {
	padding-top: 5px;
}

.yokuchi-inspiration__title {
	position: relative;

	grid-column: 1 / -1;

	margin: 0;
	padding-bottom: 20px;

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 28px;
	line-height: 40px;
	font-weight: 500;

	letter-spacing: 8px;

	text-transform: uppercase;

	color: #1d1d1b;
}

.yokuchi-inspiration__title::after {
	content: '';

	position: absolute;

	left: 0;
	bottom: 0;

	width: 45px;
	height: 2px;

	background: #e64d4d;
}

.yokuchi-inspiration__description {
	margin-bottom: 34px;

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0;

	color: #6b6b6b;
}

.yokuchi-inspiration__description p {
	margin: 0;
}

/* =========================
   LINK
   ========================= */

.yokuchi-inspiration__more {
	display: inline-flex;

	align-items: center;

	gap: 14px;

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 16px;
	line-height: 24px;

	font-weight: 500;

	letter-spacing: 2px;

	text-transform: uppercase;
	text-decoration: none;

	color: #222;
}

.yokuchi-inspiration__more.yokuchi-inspiration__more--desktop {
	display: none !important;
}

@media screen and (min-width: 783px) {
	.yokuchi-inspiration__more.yokuchi-inspiration__more--desktop {
		display: inline-flex !important;
	}

	.yokuchi-inspiration__more.yokuchi-inspiration__more--mobile {
		display: none !important;
	}
}

.yokuchi-inspiration__container > .yokuchi-inspiration__more {
	grid-column: 1;
	width: fit-content;
}

.yokuchi-inspiration__more-arrow {
	color: #e64d4d;

	font-size: 17px;

	transition: transform 0.2s ease;
}

.yokuchi-inspiration__more:hover .yokuchi-inspiration__more-arrow {
	transform: translateX(4px);
}

/* =========================
   SLIDER
   ========================= */

.yokuchi-inspiration__slider {
	position: relative;

	min-width: 0;
	width: calc(100% + max(40px, (100vw - 1440px) / 2));
}

.yokuchi-inspiration__viewport {
	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;

	scrollbar-width: none;

	cursor:
		url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='shadow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%23000' flood-opacity='.24'/%3E%3C/filter%3E%3Ccircle cx='25' cy='25' r='22' fill='none' stroke='%23fff' stroke-width='1.5' filter='url(%23shadow)'/%3E%3Cpath d='M14.2 25h19.8M26.5 18l7.5 7-7.5 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23shadow)'/%3E%3C/svg%3E")
			25 25,
		e-resize;
}

.yokuchi-inspiration__slider.is-hovering-left .yokuchi-inspiration__viewport {
	cursor:
		url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='shadow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%23000' flood-opacity='.24'/%3E%3C/filter%3E%3Ccircle cx='25' cy='25' r='22' fill='none' stroke='%23fff' stroke-width='1.5' filter='url(%23shadow)'/%3E%3Cpath d='M35.8 25h-19.8M23.5 18l-7.5 7 7.5 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23shadow)'/%3E%3C/svg%3E")
			25 25,
		w-resize;
}

.yokuchi-inspiration__viewport::-webkit-scrollbar {
	display: none;
}

.yokuchi-inspiration__track {
	display: flex;

	gap: 22px;

	width: max-content;

	padding-right: 80px;
}

/* =========================
   SLIDE
   ========================= */

.yokuchi-inspiration__slide {
	flex: 0 0 760px;

	scroll-snap-align: start;
}

.yokuchi-inspiration__image {
	position: relative;

	display: block;

	width: 100%;
	aspect-ratio: 16 / 8.8;

	overflow: hidden;

	text-decoration: none;

	background: #f4f4f4;
}

.yokuchi-inspiration__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

/* =========================
   PODPIS
   ========================= */

.yokuchi-inspiration__caption {
	margin: 13px 0 0;

	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0;

	color: #444;
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 1200px) {
	.yokuchi-inspiration__slide {
		flex-basis: 620px;
	}
}

@media (max-width: 900px) {
	.yokuchi-inspiration__container {
		grid-template-columns: 1fr;

		gap: 45px;
	}

	.yokuchi-inspiration__left {
		max-width: 600px;
	}

	.yokuchi-inspiration__slider {
		width: calc(100% + 30px);
	}

	.yokuchi-inspiration__slide {
		flex-basis: 72vw;
	}
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px) {
	.yokuchi-inspiration__container {
		gap: 35px;
	}

	.yokuchi-inspiration__title {
		font-size: 18px;
		font-weight: 500;
		line-height: 25px;
		letter-spacing: 4px;
	}

	.yokuchi-inspiration__description {
		font-size: 16px;
		font-weight: 300;
		line-height: 24px;
		letter-spacing: 0;
	}

	.yokuchi-inspiration__slider {
		width: calc(100% + 20px);
	}

	.yokuchi-inspiration__track {
		gap: 14px;

		padding-right: 20px;
	}

	.yokuchi-inspiration__slide {
		flex-basis: 84vw;
	}

	.yokuchi-inspiration__image {
		aspect-ratio: 4 / 3;
	}

	.yokuchi-inspiration__container > .yokuchi-inspiration__more {
		grid-column: 1;
		width: 100%;
	}
}