@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
	.wrapper {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 0.5em;
		width: min(100%, 600px);
		&:hover > :not(:hover) {
			opacity: 0.25;
		}
		& > * {
			grid-column: span 2;
			margin-block: calc(-25% / sqrt(3));
			&:nth-child(11n + 7) {
				/* move accross 1 column */
				grid-column-end: 4;
			}
			background: white;
			aspect-ratio: 1/1.1547;
			border-radius: 50%/25%;
			corner-shape: bevel;

			transition: scale, box-shadow;
			transition-duration: 150ms;
			transition-timing-function: ease-in-out;

			overflow: hidden;
			border: 2px solid green;
			position: relative;
			box-shadow: 0 0 0 var(--sh, 0) rgba(111 111 111 / 0.75);
			& > img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&:hover {
				scale: 1.2;
				--sh: 1em;
				transition-duration: 500ms;
				transition-timing-function: linear(
					0,
					0.202 2.8%,
					1.157 9.2%,
					1.372 12.8%,
					1.337 15.2%,
					0.962 22%,
					0.861 26%,
					1.052 39.2%,
					0.981 52.4%,
					1
				);
			}
		}
	}
}

/* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}

	body {
		background: transparent;
		color: white;
		min-height: 100%;
		margin: 0;
		padding: 1rem;
		font-family: "Jura", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
		display: flex;
		place-items: center;
		justify-content: center;
		flex-direction: column;
		transform: scale(0.8);    /* 0.8 = 80% of original size */
  		transform-origin: center; /* adjust where it scales from */
		gap: 2rem;
		& > * {
			/*outline: 1px dashed red;*/
		}
	}

	h1 {
		margin: 0;
		font-size: 1.2rem;
	}
	.note {
		font-size: 0.7rem;
	}

	.msg-supports {
		font-size: 0.8rem;
		@supports (corner-shape: notch) {
			display: none;
		}
	}
}