/* Gedeelde muziekspeler voor de homepagina en het dashboard. */
.hw-site-audio {
	align-items: center;
	background: linear-gradient(135deg, #330713 0%, #57101f 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(51, 7, 19, 0.16);
	color: #ffffff;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin: 0 0 24px;
	padding: 14px 18px;
}

.hw-home-page > .hw-site-audio {
	border-left: 0;
	border-radius: 0;
	border-right: 0;
	box-shadow: none;
	margin: 0;
	padding-left: max(36px, calc((100vw - 1296px) / 2 + 56px));
	padding-right: max(36px, calc((100vw - 1296px) / 2 + 56px));
}

.hw-site-audio-copy {
	align-items: center;
	display: flex;
	gap: 12px;
	min-width: 0;
}

.hw-site-audio-copy .dashicons {
	align-items: center;
	background: #ff3042;
	border-radius: 50%;
	display: flex;
	flex: 0 0 38px;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.hw-site-audio-copy div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hw-site-audio-copy strong,
.hw-site-audio-copy small {
	color: inherit;
}

.hw-site-audio-copy strong {
	font-size: 14px;
}

.hw-site-audio-copy small {
	font-size: 12px;
	opacity: 0.78;
}

.hw-site-audio audio {
	height: 40px;
	max-width: 480px;
	width: min(48vw, 480px);
}

@media (max-width: 700px) {
	.hw-site-audio,
	.hw-home-page > .hw-site-audio {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
		padding: 14px 18px;
	}

	.hw-site-audio audio {
		max-width: none;
		width: 100%;
	}
}