#rings {
	display: grid;
	grid-template-columns: auto auto;

	h2 {
		grid-column: 1/3;
	}
}

#sites {
	article {
		display: grid;
		grid-template-columns: auto 1fr;
	}

	h3 {
		font: 1em mspgothic;
		background-image: linear-gradient(to right, #88d4e330, transparent 50%);
		padding-left: 1em;
	}

	a {
		background-color: #88d4e330;
		width: 88px;
		height: 31px;
		grid-row: 1/3;

		&:not(:has(img)) {
			color: color-mix(in srgb, currentcolor, #88d4e3);
			display: flex;
			justify-content: center;
			align-items: center;
			&::before {content: "→"}
		}
	}

	img {
		width: 100%;
	}

	p {
		margin-block: 0;
		margin-left: 1em;
	}
}

ul {
	margin-block: 0;
}