@layers general,demo;
@layer demo {
	.grid {
		max-width: 100vw;
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(7, 1fr);
		grid-auto-rows: 120px;
		@media (min-width: 1000px) {
			grid-auto-rows: 200px;
		}
	}

	.item > img {
		width: 100%;
		height: 100%;
		object-fit: 100% 100%;
		transition: transform 0.4s ease;
	}


	.item {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
}


.item:hover {
  z-index: 3;
  transform: scale(0.9);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.item:hover > img {
  transform: scale(1.0) rotate(2deg);
}

.item[data-active="true"] {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		z-index: 2;
	}
}
@layer general {
	* {
		box-sizing: border-box;
	}
	body {
/*		background: #111;
		min-height: 100svh;
		display: grid;
		place-content: center;*/
		overflow-x: hidden;
	}
}