/* ~~~CSS Stylesheet for Zines page~~~ */
.main {
	display: grid;
	width:100%;
	grid-template-areas:
	"header"
	"featured"
	"all";
	justify-items: center;
}

.main > div.header {
	grid-area:header;
}

.main > div.featured {
	grid-area:featured;
	width: 100%;
}

h2 {
	text-align: center;
}

h3 {
	font: var(--font-size-h4)
}

.main > .featured > div.featured-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: var(--spacing-mid-rem);
	padding: var(--spacing-mid-rem) var(--spacing-lrg-rem);
	background-color: var(--color-background-focus2);
}


div.zineitem {
	color: var(--color-text-alt);
	gap:var(--spacing-sml-rem);
	width: 275px;
}

.zineitem > div.thumbnail {
	padding: var(--spacing-tiny-rem);
	padding-bottom: var(--spacing-mid-rem);
}

.zineitem > .thumbnail > a > img {
	transition: all .1s ease-in-out;
	filter: drop-shadow(0.6rem 0.6rem 0.4rem var(--color-blue-bruise));
	max-height: 320px;
	max-width: 250px;
	height: auto;
	width: auto;
	margin: auto;
}

.zineitem > .thumbnail > a > img:hover {
	transform: scale(1.05);
	transform-origin: 50% 100%;
}

.zineitem > div.plaque {
	border-radius: var(--border-radius-sml);
	background-color: var(--color-background-alt);
	padding: var(--spacing-sml-rem);
}

.zineitem > .plaque > a {
	color: var(--color-text-alt);
}

.zineitem > .plaque > a:hover {
	color: var(--color-a-alt);
}

.zineitem > .plaque > h3 {
	padding: var(--spacing-min-rem);
}
.zineitem > .plaque > p {
	padding: var(--spacing-min-rem);
}


.main > div.all {
	grid-area:all;
}

.all > h2 {
	text-align: center;
}

.main > .all> div.list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: var(--spacing-mid-rem);
	padding: var(--spacing-mid-rem) var(--spacing-lrg-rem);
}