/* Magazine widgets: normalize cover/issue image sizing across all breakpoints */
.magazine-cover-box {
	position: relative;
	width: 140px;
	height: 190px;
	overflow: hidden;
	flex-shrink: 0;
}

.magazine-mini-cover-box {
	position: relative;
	width: 100px;
	height: 150px;
	overflow: hidden;
	flex-shrink: 0;
}

.magazine-issue-box {
	position: relative;
	width: 130px;
	height: 175px;
	overflow: hidden;
	flex-shrink: 0;
}

/* Used when the cover sits beside its text (e.g. the "newest magazine" home widget),
   so it stays compact on mobile instead of forcing the text below it. */
.magazine-cover-box-inline {
	width: 90px;
	height: 120px;
}

/* 20% smaller than .magazine-issue-box, used for the issues carousel of the
   "newest magazine" home widget. */
.magazine-issue-box-sm {
	width: 104px;
	height: 140px;
}

@media (min-width: 768px) {
	.magazine-cover-box,
	.magazine-cover-box-inline {
		width: 220px;
		height: 300px;
	}

	.magazine-issue-box {
		width: 220px;
		height: 300px;
	}

	.magazine-issue-box-sm {
		width: 176px;
		height: 240px;
	}
}

.magazine-mini-cover-img,
.magazine-numbers-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 0.75rem;
}

.magazine-numbers-grid > div {
	min-width: 0;
	width: 100%;
}

.magazine-numbers-grid .magazine-issue-box {
	width: 100%;
	height: auto;
	aspect-ratio: 130 / 175;
}

@media (min-width: 768px) {
	.magazine-numbers-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 1.5rem;
	}

	.magazine-numbers-grid .magazine-issue-box {
		width: 220px;
		height: 300px;
		aspect-ratio: auto;
		margin-inline: auto;
	}
}

.magazine-issue-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The magazine cover must be shown in full (not cropped), it can only shrink on mobile */
.magazine-cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}