.main {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 1350px;
	max-width: 98%;
	margin: auto;
	margin-top: -3.5rem;
}

.column {
	width: 675px;
	max-width: 47%;
	height: 100%;
	background: black;
}

.category {
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: var(--color-fg);
	padding: 1em;
	margin-top: 5%;

	h1 {
		font-size: 4.375rem;
		text-decoration: underline;
		margin-top: 0;
	}

	.entry {
		border: 3px solid var(--color-secondary);
		padding: 3px;
		margin-left: 1vh;
		margin-bottom: 2vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;

		img {
			width: 100%;
			height: 15em;
			object-fit: contain;
			margin: auto;
		}

		h1 {
			font-size: 1.875rem;
			font-family: "baskersville";
			text-align: center;
			text-decoration: none;
			/*min-height: 2.3em;*/

			i {
				font-family: "baskersville-italic";
			}
		}

		.details {
			position: absolute;
			top: 0.1rem;
			right: -0.8rem;
			padding-top: 0.2rem;
			padding-right: -0.8rem;
			font-size: 0.875rem;
			writing-mode: vertical-lr;
			transform: rotate(180deg);
		}
	}
	.entry:hover {
		border: 3px solid var(--color-accent);
	}
}

@media screen and (max-width: 1100px) {
	.category {
		h1 {
			font-size: 3rem;
			text-align: center;
		}

		.entry {
			h1 {
				font-size: 1.25rem;
			}

			.details {
				background: var(--color-bg);
				border-right: 3px solid var(--color-secondary);
				border-top: 3px solid var(--color-secondary);
			}
		}
	}
}

@media screen and (max-width: 600px) {
	.main {
		flex-direction: column;
	}

	.column {
		max-width: 95%;
		margin: auto;
	}
}