:root {
	--spacing: 1rem;
}

main {
	min-height: var(--content-height);
	max-width: clamp(40vw, 700px, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

.card {
	box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
	background-color: var(--color-background-offset);
	display: flex;
	flex-direction: column;
	padding: var(--spacing);
	gap: var(--spacing);
	border-radius: calc(var(--spacing) * 2 );


	h2{
		text-align: center;
	}

	ol {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--spacing);
		padding-inline-start: var(--spacing-double);

	}

	p {

		margin: 0;
	}
}

.tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing);

	.tile {
		display: flex;
		flex-direction: column;
		flex: 30%; 
		@media screen and (width <=  480px){
			flex: 100%; 
		}
		gap: var(--spacing);
		border-radius: var(--spacing);
		background-color: var(--color-foreground);
		padding: var(--spacing);
		border: 4px solid var(--color-primary);
		grid-template-columns: auto;
		grid-template-rows: min-content auto;

		.tile__title {
			font-weight: bold;
    		font-family: var(--font-title);
			font-size: 1.5rem;
			text-align: center;

			color: var(--color-primary);
			&:visited{
				color: var(--color-primary);
			}
		}

		.tile__description {}
		.tile__icon{
			float: left;
			color: var(--color-primary);
			padding: 0.125em;
		}
	}
}