mixin grid
	horizontal-wrap
	justify-content center

mixin grid-cell
	position relative

	width anime-image-medium-width
	height anime-image-medium-height
	max-width anime-image-medium-width
	max-height anime-image-medium-height
	border-radius ui-element-border-radius
	margin 0.5rem

	// If text-shadow is enabled, the whole container will repaint.
	// We need to disable text-shadow to reduce re-painting.
	a
		:hover
			text-shadow none

mixin grid-text
	vertical
	width 100%
	height 100%
	align-items center
	justify-content center
	font-size 1rem
	color rgb(160, 160, 160)

mixin grid-image
	width 100%
	height 100%
	border-radius ui-element-border-radius
	object-fit cover
	default-transition

mixin grid-icon
	font-size 2.5rem
	margin-top 2rem
	margin-bottom 0.7rem
	color link-color

mixin flip-card
	:hover
		.front
			transform rotateY(180deg)
			opacity 0
		.back
			transform rotateY(0deg)
			opacity 1

.front
	position absolute
	left 0
	top 0
	opacity 1
	default-transition
	transform rotateY(0)

.back
	position absolute
	left 0
	top 0
	opacity 0
	default-transition
	transform rotateY(180deg)