main {
	margin-top: 12em;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.container {
	padding-inline: var(--m);
	margin-block: 0;
	p {
		margin-bottom: var(--s);
	}
	h2,
	h3,
	h4 {
		margin-top: var(--l);
		margin-bottom: var(--s);
	}
	ul {
		margin-bottom: 1.5em;
	}
	li {
		margin-bottom: var(--s);
		margin-left: var(--m);
	}
	li p {
		margin-bottom: 0;
	}
}

/* Gallery */
.grid {
	--columns: 12;
	--gutter: var(--m);
	display: grid;
	grid-gap: var(--gutter);
	grid-template-columns: 1fr;
	padding-inline: var(--m);
	padding-block: 1em;
}

@media (min-width: 50rem) {
	main {
		margin-top: 24em;
	}
	.grid {
		grid-template-columns: repeat(12, 1fr);
	}
	.grid > .column {
		grid-column: span var(--columns);
	}
}
/* Icon Set */
.icon-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1em;
}
.icon-card {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
}
.icon-card img {
	min-height: 200px;
	margin: 1em;
	pointer-events: none;
}
.icon-card img::selection {
	background: transparent;
}

/* custom Coursor for Icon sets */
.cursors div {
	display: none;
}
@media (min-width: 50rem) {
	.cursors div {
		display: block;
		position: absolute;
		top: 300px;
		left: 300px;
		width: 4px;
		height: 4px;
		z-index: 10000;
		background-color: var(--black);
		transform: translate(-100%, -120%);
		pointer-events: none;
	}

	.cursors div span {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, -80%);
		background-color: var(--black);
		color: var(--midgray);
		padding-top: 5px;
		padding-bottom: 3px;
		padding-inline: 10px;
		border-radius: 999px;
		font-size: var(--fs-200);
		line-height: 1;
		display: none;
		transition: opacity 0.2s;
	}
	.cursors div span.visible {
		display: block;
	}
}