.items {
	display: flex;
	flex-wrap: wrap;
	gap: 6rem;
	justify-content: center;
	margin-block: 4rem;

	img {
		width: 22rem;
		margin-block: auto;
		filter: drop-shadow(1rem 2rem 1.5rem rgb(0, 0, 0, 0.35));
		transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);

		&:nth-child(odd) {
			transform: rotate(-1.2deg);
		}
		&:nth-child(even) {
			transform: rotate(1.4deg) translateY(10px);
		}
		&:nth-child(3n) {
			transform: rotate(-0.5deg) translateY(-5px);
		}

		&:hover,
		&:focus {
			transform: scale(1.1) rotate(0deg) translateY(-10px);
			filter: drop-shadow(1rem 2.5rem 2rem rgb(0, 0, 0, 0.45));
		}

		&:nth-child(5n + 1) {
			padding: 1rem;
			background: #fff;
			border: 1rem solid var(--yellow);
			border-radius: 0.5rem;
			corner-shape: notch;
			background-image: linear-gradient(135deg, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0.4) 50%, rgb(255, 255, 255, 0) 100%);
		}

		&:nth-child(5n + 2) {
			padding: 1.25rem;
			background: #e0ddd5;
			border: 1.5rem solid #3d1c02;
			border-radius: 3rem;
			corner-shape: bevel;
			background-image: repeating-linear-gradient(to right, rgb(0, 0, 0, 0.1) 0px, rgb(0, 0, 0, 0.1) 1px, transparent 1px, transparent 4px);
			box-shadow: inset 0 0 1rem rgb(0, 0, 0, 0.5);
		}

		&:nth-child(5n + 3) {
			padding: 0.5rem;
			border: 1rem solid #111;
			border-radius: 4rem;
			corner-shape: round;
			background: #1a1a1a;
			outline: 1px solid rgb(255, 255, 255, 0.2);
			outline-offset: -0.75rem;
		}

		&:nth-child(5n + 4) {
			padding: 1.5rem;
			background: #eee;
			border: 0.75rem solid #f5f5f5;
			border-radius: 1rem;
			corner-shape: notch;
			background-image: radial-gradient(#ccc 10%, transparent 10%);
			background-size: 4px 4px;
			box-shadow:
				0 0 0 2px #ddd,
				inset 0 0 10px rgb(0, 0, 0, 0.1);
		}

		&:nth-child(5n + 5) {
			padding: 2.5rem;
			background: #fff;
			border: 2px solid #999;
			border-radius: 0.25rem;
			box-shadow:
				inset 0.75rem 0.75rem 1.25rem rgb(0, 0, 0, 0.2),
				0 0 0 1rem #222,
				0 0 0 1rem #444;
		}
	}
}