:root {
	--grid-gap: 1.5rem;
}

/* COLOURS */
ul.cards > li {
	border: 3px solid var(--colour-green-faded);
}

ul.cards span {
	background-color: var(--colour-black-faded);
}

ul.cards > li:hover,
ul.cards > li:hover span {
        background-color: var(--colour-green);
        color: var(--colour-black);
}


/* TEXT */
ul.cards ul.tags {
	text-align: start;
}

ul.cards ul.tags {
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}


/* SIZING */
ul.cards > li {
	max-width: var(--break-point);
}

ul.cards img,
ul.cards ul.tags {
	max-width: 100%;
}


/* SPACING */
ul.cards {
	padding: 0 2rem;
}

ul.cards > li {
	padding: 0 calc(var(--grid-gap) / 2);
	margin: 0 0 var(--grid-gap) 0;
}

ul.cards h1 {
	margin: 0;
}

ul.cards h1,
ul.cards ul.tags {
	padding: calc(var(--grid-gap) / 2) 0;
}

ul.cards span {
	padding: 3px 0.5rem;
}


/* ARRANGEMENT */
main {
	text-align: center;
}

ul.cards {
	display: inline-block;
	column-count: min(4, calc(100vw / 450px));
	column-width: var(--break-point);
	column-gap: var(--grid-gap);
}

ul.cards li {
	break-inside: avoid;
}

ul.cards div {
	position: relative;
}

ul.cards span {
	position: absolute;
	bottom: 3px;
	right: 0;
}


/* BORDERS */
ul.cards img,
ul.cards > li {
	border-radius: 1rem;
}

ul.cards span {
	border-bottom-right-radius: 1rem;
	border-top-left-radius: 1rem;
}


/* LIST ITEMS */
ul.cards > li::marker {
	content: "";
}