@import url('https://rsms.me/inter/inter.css');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--light-grey: #C8CED2;
	--mid-grey: #919BA1;
	--dark-grey: #67757E;
	--black: #1C2F3B;
	--accent: #1EEBB0;
}

body {
	font-family: Inter, "Inter UI", "Helvetica Now", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;

	background-color: var(--black);
	color: var(--light-grey);

	width: calc(100% - 2rem);
	max-width: 60rem;
	margin: 6rem auto;
}

@media screen and (max-width: 30rem) {
	body {
		width: 100%;
	}
}

header {
	margin-bottom: 1.25rem;
}

header > img {
	height: 4rem;
}

main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

h1 {
	font-size: inherit;
	font-weight: 600;
	height: 3.125rem;
	border-bottom: 1px solid var(--dark-grey);

	display: flex;
	align-items: center;
	padding: 0.875rem;
}

a {
	text-decoration: none;
	color: inherit;
}

.link-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 3.125rem;
	gap: 1.25rem;
}

@media screen and (max-width: 50rem) {
	.link-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 30rem) {
	.link-grid {
		grid-template-columns: 1fr;
	}
}

.link-grid .link-text {
	display: flex;
	align-items: center;
	padding: 0.875rem;
	gap: 0.875rem;
	height: 3.125rem;
}

.link-grid .link-text::before {
	content: "";
	background-color: currentColor;
	width: 0.875rem;
	height: 0.875rem;

	-webkit-mask-image: var(--link-icon);
	mask-image: var(--link-icon);
	-webkit-mask-size: cover;
	mask-size: cover;
}

.link-grid .link-text::after {
	content: "→";
	margin-left: auto;
}

.link-grid > .link-showcase {
	display: flex;
	flex-direction: column;
	grid-row-end: span 4;

	background-color: var(--black);
	color: var(--light-grey);
	border: 1px solid var(--dark-grey);

	overflow: hidden;

	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

.link-grid > .link-showcase.link-showcase-large {
	grid-column-end: span 2;
}

@media screen and (max-width: 30rem) {
	.link-grid > .link-showcase.link-showcase-large {
		grid-column-end: span 1;
	}
}

.link-grid > .link-showcase:hover {
	background-color: var(--link-colour);
	color: var(--black);
	border-color: var(--link-colour);
}

.link-grid > .link-showcase:active {
	transform: scale(0.95);
}

.link-grid > .link-showcase > .link-text {
	transition: transform 0.2s ease;
}

.link-grid > .link-showcase:hover > .link-text {
	transform: translateY(-3.125rem);
}

.link-grid > .link-showcase > .background {
	width: 100%;
	flex-grow: 1;
	background-image: var(--image);
	background-size: cover;
	background-position: center;

	transition: opacity 0.2s ease, transform 0.2s ease;
}

.link-grid > .link-showcase:hover > .background {
	opacity: 0.5;
	transform: translateY(-3.125rem);
}

.link-grid > .link-single {
	display: flex;
	flex-direction: column;

	background-color: var(--black);
	color: var(--light-grey);
	border: 1px solid var(--dark-grey);

	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.05s ease, padding 0.2s ease;
}

.link-grid > .link-single:hover {
	background-color: var(--link-colour);
	color: var(--black);
	border-color: var(--link-colour);
	padding-left: 0.875rem;
}

.link-grid > .link-single:active {
	transform: scale(0.95);
}

.artwork-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	gap: 1.25rem;
}

.artwork-grid > .artwork {
	display: flex;
	flex-direction: column;

	background-color: var(--black);
	color: var(--light-grey);
	border: 1px solid var(--dark-grey);

	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

.artwork-grid > .artwork > img {
	width: 100%;
}

.artwork-grid > .artwork > p {
	min-height: 3.125rem;
	padding: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.artwork-grid > .artwork > p::before {
	content: "↓";
}

.artwork-grid > .artwork:hover {
	background-color: var(--accent);
	color: var(--black);
	border-color: var(--accent);
}

.artwork-grid > .artwork:active {
	transform: scale(0.95);
}