canvas {
	width: 100%; display: block; margin: 0; border-radius: 7px;
	/* border-top-left-radius: 8px; border-top-right-radius: 8px; */
}
audio { width: 100%; margin: 2px 0 0 0; padding: 0; }
iframe { width: 100%; height: 50vh; border: none; border-radius: 10px; }

/* time { border: 2px solid var(--color-violet); border-radius: 3px; padding: 2px 8px; } */

.image-acousmo-full {
	width:100%; height: 80px; border-radius: 5px;
}

.grid-pages {
	display: grid; gap: 0; margin: 0; height: 64px; overflow: hidden;
	background-color: #555; background-size: 100% 100%; border-radius: 7px;
	/* border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; */

	& > div {
		background-color: #D7DEE3dd;
		&:hover { background-color: #D7DEE300; }
	}
}



ul.grid-page-accousm {
	display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;

	& li  {

		& a {
			position: relative;
			background: linear-gradient(90deg, var(--color-grey-b-light), var(--color-grey-b));
			display: block; aspect-ratio: 3/1; color: #000B; display: flex; flex-direction: row; justify-content: space-between; align-items: start;
			border-radius: 4px; overflow: hidden;
			outline: 2px solid #1030; outline-offset: 0; transition: all 100ms;
			/* box-shadow: 0 -3px 5px #0007; */

			& div.image-acousmo-bg {
				position: absolute; left: 0; right: 0; top: 48px; bottom: 0; filter: grayscale(100%) brightness(100%) contrast(150%);
				background-size: cover; background-position: 0 0; background-repeat: no-repeat;
			}

			& h4 { margin: 0; margin-top: 0; padding: 18px 0 18px 12px;  font-size: 0.9rem; font-weight: 700; }
			& time { background-color: var(--color-grey-b-drk); color: var(--color-grey-b); margin: 15px 15px 0 0; border-radius: 3px; padding: 2px 6px;  opacity: 1; }

			&:hover {
				color: #000; border-radius: 0px; outline: 2px solid #103; outline-offset: 8px;
				& time { background-color: #fff; color: var(--color-link); opacity: 1;}
				& div.image-acousmo-bg { filter: grayscale(0%); }
			}

		}
	}
}