.mkp-audio-visual-frame,
.mkp-audio-visual-frame * {
	box-sizing: border-box;
}

.mkp-audio-visual-frame {
	aspect-ratio: var(--mkp-video-frame-ratio, 1 / 1);
	background: rgba(93, 64, 55, 0.1);
	border: 1px solid rgba(94, 62, 45, 0.25);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	width: min(180px, 100%);
}

.mkp-audio-visual-frame[hidden],
.mkp-audio-visual-frame [hidden] {
	display: none !important;
}

.mkp-audio-visual-frame img,
.mkp-audio-visual-frame video {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.mkp-audio-visual-frame video {
	background: #241915;
}

.mkp-audio-visual-layout {
	display: block;
}

.has-audio-visual .mkp-audio-visual-layout {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
}

.mkp-audio-visual-main {
	min-width: 0;
}

.mkp-song-card-visual {
	margin: 0 auto;
	max-width: 150px;
}

.mkp-native-audio-visual {
	align-items: start;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
	margin: 18px 0;
}

.mkp-native-audio-visual > .mkp-audio-visual-frame {
	width: 100%;
}

.mkp-native-audio-host {
	min-width: 0;
}

.mkp-native-audio-host .wp-block-playlist {
	box-sizing: border-box;
	margin: 0 !important;
	max-width: 100%;
	width: 100%;
}

.mkp-native-audio-host audio,
.mkp-native-audio-host .mejs-container {
	max-width: 100%;
	width: 100% !important;
}

@media (max-width: 600px) {
	.has-audio-visual .mkp-audio-visual-layout,
	.mkp-native-audio-visual {
		grid-template-columns: 1fr;
	}

	.mkp-audio-visual-layout > .mkp-audio-visual-frame,
	.mkp-native-audio-visual > .mkp-audio-visual-frame {
		margin: 0 auto;
		max-width: 230px;
	}

	.wp-block-playlist,
	.wp-block-playlist * {
		box-sizing: border-box;
	}

	.wp-block-playlist {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		min-width: 0;
		overflow: hidden;
		width: 100% !important;
	}

	.wp-block-playlist__waveform-player,
	.wp-block-playlist .waveform-player,
	.wp-block-playlist .waveform-player-inner,
	.wp-block-playlist .waveform-body,
	.wp-block-playlist .waveform-track,
	.wp-block-playlist .waveform-container,
	.wp-block-playlist .waveform-info {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.wp-block-playlist .waveform-body,
	.wp-block-playlist .waveform-track,
	.wp-block-playlist .waveform-info {
		overflow: hidden;
	}

	.wp-block-playlist .waveform-info {
		align-items: center;
		flex-wrap: wrap;
	}

	.wp-block-playlist .waveform-text {
		flex: 1 1 150px;
		min-width: 0;
	}

	.wp-block-playlist .waveform-title,
	.wp-block-playlist .waveform-artist {
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.wp-block-playlist .waveform-meta {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.wp-block-playlist__tracklist {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100%;
		min-width: 0;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100%;
	}

	.wp-block-playlist-track,
	.wp-block-playlist-track__button {
		max-width: 100%;
		min-width: 0;
		width: 100%;
	}

	.wp-block-playlist-track__button {
		align-items: center;
		gap: 7px;
		padding: 7px !important;
		white-space: normal;
	}

	.wp-block-playlist-track__button::before {
		flex: 0 0 18px;
		margin-right: 0 !important;
		text-align: right;
		width: 18px;
	}

	.wp-block-playlist-track__image {
		flex: 0 0 46px !important;
		height: 46px !important;
		margin: 0 !important;
		object-fit: cover;
		width: 46px !important;
	}

	.wp-block-playlist-track__content {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
	}

	.wp-block-playlist-track__title {
		display: -webkit-box;
		line-height: 1.25;
		overflow: hidden;
		overflow-wrap: anywhere;
		text-overflow: ellipsis;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.wp-block-playlist-track__length {
		flex: 0 0 34px;
		margin-left: 0;
		text-align: right;
		width: 34px;
	}
}