.album-group {
	margin-bottom: 1rem;
	text-align: center;

	/* Makeshift hack to make this wider than main
	** Is able to handle window width smaller than 900px */
	width: clamp(0px, calc(100vw - calc(var(--page-padding) * 2)), 900px);
	position: relative;
	left: clamp(-50px, calc((800px - calc(100vw - calc(var(--page-padding) * 2))) / 2), 0px);

	& h-cn { max-width: 900px; } /* Part of makeshift hack */

	& img:not(.img-link) {
		--border: #000;
		--hover-clr: #0007;
	
		width: 128px;
		height: 128px;
		image-rendering: pixelated;
	
		border: 2px solid var(--border);
		border-radius: 4px;
		background-color: #14192a;
	
		transition:
			transform .15s ease-out,
			filter .1s ease-out;

		transform: translateY(0px);

		&:hover {
			filter: drop-shadow(0 3px var(--hover-clr)) brightness(1.1);
			transform: translateY(3px);
		}

		&:active {
			transition:
				transform .1s ease-in,
				filter .05s ease-in;
			
			filter: none;
			transform: translateY(0px);
		}
	}

	& a, & h-c {
		background: none;
		text-decoration: none;
	}

	& h-c { position: relative; }

	/* Override defaults from base.css & browser */
	& details {
		display: inline-block;
		margin: 0;
		background: none;
		padding: 0;
		border-radius: 0;
		border: 0;
		/*height: 132px;*/

		& summary { margin-bottom: 0; }
		& :last-child { margin: 0; }
		& ::marker { content: none; }
		& .links a { pointer-events: all; }

		&[open] {
			& .links{
				position: absolute;
				z-index: 1;
				top: -112px;
				text-align: center;
				width: 128px;
				height: 128px;
				left: 2px;
				pointer-events: none;
			}
			& img:not(.img-link) {
				filter: drop-shadow(0 0 var(--hover-clr)) brightness(0.5) blur(1px)
			}
			& :hover img:not(.img-link) {
				filter: drop-shadow(0 3px var(--hover-clr)) brightness(0.5) blur(1px)
			}
		}
	}
}

.inline-list.contains-albums {
	margin: 1rem -1rem;
	text-align: center;

	/* Makeshift hack to make this wider than main
	** Is able to handle window width smaller than 900px */
	/*width: clamp(0px, calc(100vw - calc(var(--page-padding) * 2)), 900px);
	position: relative;
	left: clamp(-50px, calc((800px - calc(100vw - calc(var(--page-padding) * 2))) / 2), 0px);*/

	/*& h-cn { margin-left: 0.625rem; }*/

	& > li {
		& > h-c {
			background: none;
			text-decoration: none;

			position: relative; /* ? */

			& > img {
				--border: #000;
				--hover-clr: #0007;
			
				width: 128px;
				height: 128px;
				image-rendering: pixelated;
			
				border: 2px solid var(--border);
				border-radius: 4px;
				background-color: #14192a;
			
				transition: .2s ease-in;
				position: relative;
				bottom: 0;

				&:hover, &:focus {
					transition: .2s ease-in;
					filter: drop-shadow(0 3px var(--hover-clr)) brightness(1.1);
					bottom: 3px;
				}

				&:active {
					filter: drop-shadow(0 0 var(--hover-clr));
					transition: .1s ease-in;
					bottom: 0;
				}
			}
		}

		& > button.p-c {
			background: none;
			margin: 0;
			padding: 0;

			& > img {
				--border: #000;
				--hover-clr: #0007;
			
				width: 128px;
				height: 128px;
				image-rendering: pixelated;
			
				border: 2px solid var(--border);
				border-radius: 4px;
				background-color: #14192a;
			
				transition: .2s ease-in;
				position: relative;
				bottom: 0;
			}

			&:hover > img, &:focus-visible > img {
				transition: .2s ease-in;
				filter: drop-shadow(0 3px var(--hover-clr)) brightness(1.1);
				bottom: 3px;
			}

			&:active > img {
				filter: drop-shadow(0 0 var(--hover-clr));
				transition: .1s ease-in;
				bottom: 0;
			}
		}
	}
}

/*
** ALBUM LIST
*/

/* Pink
a[ext], a:not(:local-link) {
color: #ecc3ff; #e4a9ff #de94ff
text-decoration-color: #d57bff; #c23eff #a918ec
text-decoration-style: underline;}

	a[ext]:hover, a:not(:local-link):hover {
	color: #d57bff;}
*/

a[ext] {
color: var(--clr-external-link);
text-decoration-color: var(--clr-external-link-line);
text-decoration-style: wavy;
text-decoration-thickness: 1px;}

	a[ext]:hover {
	color: var(--clr-external-link-hover);}

a[ext] h-c, h-c a[ext] {
color: var(--clr-external-link-sn);
text-decoration-color: var(--clr-external-link-sn-line); 
text-decoration-style: double;}

	a[ext] h-c:hover, h-c a[ext]:hover {
	color: var(--clr-external-link-sn-hover);}

a:not(:local-link) {
color: var(--clr-external-link);
text-decoration-color: var(--clr-external-link-line);
text-decoration-style: wavy;}

	a:not(:local-link):hover {
	color: var(--clr-external-link-hover);}

.notes + h-cn::after {
	--snn-subpage-icon: url("/assets/site/music.gif") !important;
}
/*
#cd1bff
#de94ff
*/

#album-toggle-div {
	display: none;
	text-align: center;
}