.kf-gallery {
	display: flex;
	gap: 16px;
	align-items: stretch;
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
}

.kf-main {
	position: relative;
	flex: 1;
}

.kf-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.kf-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 220px;
}

.kf-thumb {
	cursor: pointer;
	border-radius: 8px;
	overflow: hidden;
	border: 3px solid transparent;
	transition: border-color 0.2s;
	position: relative;
	flex: 1;
}

.kf-thumb.active {
	border-color: #ff6b00;
}

.kf-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kf-thumb span {
	position: absolute;
	bottom: 6px;
	left: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
}

/* Plaanid (majad-müügiks) pole fotod - "cover" kärbiks mõõdud/tekstid
   kaadrist välja. Näitame neid "contain"-iga, valgel taustal, nii et kogu
   plaan jääb alati nähtavaks. Ei puuduta tavalisi majapilte/Tehtud Projektid
   galeriisid, kuna klass lisatakse ainult "Plaan" sildiga piltidele. */
.kf-main.kf-main-plan img,
.kf-thumb-plan img {
	object-fit: contain;
	background: #fff;
}

/* Majad Müügiks galeriis (.kf-gallery--house) on tihti ainult 1-2 pilti
   (foto + plaan), mistõttu tehtud-projektid stiilis "flex:1" kõrgus (mis
   jagab pisipildid piltide arvuga) teeks need liiga pikaks/venitatuks.
   Siin on pisipildid alati fikseeritud ruudukujulised, olenemata piltide
   arvust - sama proportsioon, mis tehtud-projektid näites 4 pildiga
   tekib. Skopeeritud ainult "kf-gallery--house" peale, nii et Tehtud
   Projektid vidin (millel seda klassi pole) jääb täiesti muutumatuks. */
.kf-gallery--house .kf-thumbs {
	justify-content: center;
}

.kf-gallery--house .kf-thumb {
	flex: none;
	aspect-ratio: 1 / 1;
}

@media (max-width: 767px) {
	.kf-gallery {
		flex-direction: column;
	}

	.kf-thumbs {
		flex-direction: row;
		width: 100%;
	}

	.kf-thumb {
		flex: 1;
	}
}