/*

fr units are available free space.

width has a definite size, height doesn't in an overflow-y enabled context.

*/
.kaban {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 10rem);
	gap: 0.5rem;
	width: 100%;
	padding: 1rem 0rem;
}

.kaban div {
	overflow-y: auto;
	border: 1px black solid;
	background-color: var(--color-base);
	box-sizing: border-box;
}
.kaban div:has(img) {
	overflow: hidden;
}

.kaban img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.kaban .full-w-grid {
	grid-column-start: 1;
	grid-column-end: -1;
}
.kaban .full-h-grid {
	grid-row-start: 1;
	grid-row-end: -1;
}
.kaban .full-w-grid:first-child,
.kaban .full-w-grid:last-child {
	height: 10rem;
	object-position: center;
}

.grid-w-1 {
	grid-column-end: span 1;
}
.grid-w-2 {
	grid-column-end: span 2;
}
.grid-w-3 {
	grid-column-end: span 3;
}
.grid-w-4 {
	grid-column-end: span 4;
}

.grid-h-1 {
	grid-row-end: span 1;
}
.grid-h-2 {
	grid-row-end: span 2;
}
.grid-h-3 {
	grid-row-end: span 3;
}
.grid-h-4 {
	grid-row-end: span 4;
}

.object-center {
	object-position: center;
}
.object-left {
	object-position: left;
}
.object-right {
	object-position: right;
}
.object-top {
	object-position: top;
}
.object-bottom {
	object-position: bottom;
}