$width-mobile: 900px;

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

main.songs {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1em;
	max-width: 50em;
	margin: 0 auto;
	padding: 1em;

	@media only screen and (max-width: $width-mobile) {
		grid-template-columns: 1fr;
	}

	.filters {
		// ...
	}

	.song-list {
		display: grid;
		gap: 1em;

		&>div {
			display: flex;
			justify-content: space-between;

			.meta .title {
				font-weight: bold;
			}

			.links {
				display: flex;
				gap: .5em;
			}
		}
	}
}

iframe.song {
	display: block;
	width: 100%;
	min-height: 100vh;
	border: 0;
}