/**
 * ==================================================
 * Album Grid
 * Reusable Component
 *
 * Used by:
 * - Single Album
 * - Single Artist
 * - Artist Archive
 * ==================================================
 */


/**
 * ==================================================
 * Grid Layout
 * ==================================================
 */

.album-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.album-grid__item {
	margin: 0;
}


/**
 * ==================================================
 * Card
 * ==================================================
 */

.album-grid__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.album-grid__image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform .25s ease, box-shadow .25s ease;
}


/**
 * ==================================================
 * Overlay Colors
 * ==================================================
 */

.album-grid__overlay {
	position: absolute;
	inset: 0;
	opacity: .82;
}

.album-grid__overlay--green {
	background: linear-gradient(to right, #001510, #00bf8f);
}

.album-grid__overlay--gold {
	background: linear-gradient(to right, #757519, #ccccb2);
}

.album-grid__overlay--blue {
	background: linear-gradient(to right, #283e51, #4b79a1);
}

.album-grid__overlay--gray {
	background: linear-gradient(to right, #d7d2cc, #304352);
}

.album-grid__overlay--red {
	background: linear-gradient(to right, #1f1c18, #8e0e00);
}


/**
 * ==================================================
 * Content
 * ==================================================
 */

.album-grid__content {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	color: #fff;
}

.album-grid__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.album-grid__subtitle {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255,255,255,.95);
}


/**
 * ==================================================
 * Hover
 * ==================================================
 */

.album-grid__link:hover {
	text-decoration: none;
}

.album-grid__link:hover .album-grid__image {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.album-grid__link:hover .album-grid__title {
	text-decoration: underline;
}


/**
 * ==================================================
 * Responsive
 * ==================================================
 */

@media (max-width: 991px) {

	.album-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 575px) {

	.album-grid {
		grid-template-columns: 1fr;
	}

}