/* Horizontal rails. */
.ks-rail { --n: 2.3; }
@media (min-width: 640px) { .ks-rail { --n: 3.3; } }
@media (min-width: 768px) { .ks-rail { --n: 4.3; } }
@media (min-width: 1024px) { .ks-rail { --n: 6; } }
@media (min-width: 1280px) { .ks-rail { --n: 7.75; } }

.ks-rail__viewport { position: relative; }
.ks-rail__track {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--n) - 1) * var(--ks-rail-gap)) / var(--n));
	gap: var(--ks-rail-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ks-rail__track::-webkit-scrollbar { display: none; }
.ks-rail__item { scroll-snap-align: start; min-width: 0; }
.ks-rail__btn {
	position: absolute; top: 30%; z-index: 2;
	display: none; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--ks-white); color: var(--ks-black);
	box-shadow: 0 2px 10px rgba(10, 10, 10, .15);
	transform: translateY(-50%);
	transition: opacity .2s;
}
.ks-rail__btn--prev { left: -20px; }
.ks-rail__btn--next { right: -20px; }
.ks-rail__btn[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 1024px) {
	.ks-rail__btn { display: inline-flex; opacity: 0; }
	.ks-rail__viewport:hover .ks-rail__btn:not([disabled]) { opacity: 1; }
}

/* Lookbook and news rails. */
.ks-rail--looks { --n: 2.3; }
@media (min-width: 768px) { .ks-rail--looks { --n: 3.3; } }
@media (min-width: 1024px) { .ks-rail--looks { --n: 5.2; } }
@media (min-width: 1280px) { .ks-rail--looks { --n: 5.2; } }
.ks-look { display: block; overflow: hidden; }
.ks-look svg, .ks-look img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s var(--ks-ease); }
.ks-look:hover svg, .ks-look:hover img { transform: scale(1.03); }
.ks-rail--news { --n: 1.2; }
@media (min-width: 640px) { .ks-rail--news { --n: 2.2; } }
@media (min-width: 1024px) { .ks-rail--news { --n: 4; } }
.ks-post-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; line-height: 0; background: var(--ks-gray7); }
.ks-post-card__media svg, .ks-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ks-post-card__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 16px; font-size: var(--ks-fs-16); font-weight: 600; line-height: 1.35;
}
@media (min-width: 1024px) { .ks-post-card__title { font-size: var(--ks-fs-18); } }
.ks-post-card__link:hover .ks-post-card__title { text-decoration: underline; text-underline-offset: 3px; }
.ks-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: var(--ks-gray3); font-size: var(--ks-fs-12); }