canvas {
	display: none;
}

.row {
	display: flex;
	/* flex-direction: row-reverse; */
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.magazine {
	/* width: calc(25% - 1rem); */
	max-width: calc(25% - 1rem);
	border: 1px solid var(--primary-color);
	padding: 1rem;
	border-radius: 10px;
	cursor: pointer;
	flex-grow: 1;
}

.magazine:hover {
	background-color: var(--primary-color);
}

.magazine:hover span {
	color: var(--background-color);
}

img {
	width: 100%;
}

span {
	display: inline-block;
	width: 100%;
	margin-top: 1rem;
	text-align: center;
}

@media all and (max-width: 970px) {
	.magazine {
		width: calc(50% - 1rem);
	}
}

@media all and (max-width: 500px) {
	.row {
		flex-direction: column-reverse;
	}
	.magazine {
		width: 100%;
	}
}

@media (orientation: portrait) and (pointer:none), (pointer:coarse) {
	.row {
		gap: 50px;
		margin-bottom: 50px;
		flex-direction: column-reverse;
	}
	.magazine {
		width: 100%;
		font-size: 2rem;
		max-width: 100%;
	}
}