:root {
	--assignmentbackgroundcolour: #151514;
	}

.assignments_grid {
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	gap: 1em;
	margin: 1em 0;
}

.assignment {
	flex: 5;
	
	display: grid;
	grid-template-columns: [leftedge] 2fr [mid] 1fr [rightedge];
	grid-template-rows: auto;	
	gap: 0;
	}
.assignment_description, .assignment_collectible {
	grid-column-start: leftedge;
	grid-column-end: rightedge;	
	
	padding: 0 1em;	
	background-color: var(--assignmentbackgroundcolour);
	border-width: 2px;
	border-style: solid;
	}
.assignment_description {
	border-color: transparent;
	}
.assignment_collectible {
	border-color: transparent transparent transparent var(--pagecolour);
	
	background-image: repeating-linear-gradient(-45deg,
		var(--pagecolour), 
		var(--pagecolour) 1em,
		var(--assignmentbackgroundcolour) 1em,
		var(--assignmentbackgroundcolour) 2em
		);	
	}
.assignment_collectible img {
	background-color: var(--assignmentbackgroundcolour);
	}

@media (min-width: 500px) {
	.assignment_description {
		grid-column-start: leftedge;
		grid-column-end: mid;
		}
	.assignment_collectible {
		grid-column-start: mid;
		grid-column-end: rightedge;
		border-color: var(--pagecolour) transparent transparent transparent;
		}
	}

@media (min-width: 800px) {
	.assignments_grid {
		flex-flow: row wrap;
		}
	}