:root {
	--primary: #EF233C;
	--secondary1: #2B2D42;
	--secondary2: #D90429;
	--background1: #8D99AE;
	--background2: #EDF2F4;
}

* {
	text-align: center;
	font-family: Arial;
}

body {
	    background-color: var(--background1);
}

#songs {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.card {
	width: 250px;
	background-color: var(--secondary1);
	color: var(--background1);
	border-radius: 8px;
	cursor: pointer;
}
.card img {
	width: 100%;
	height: 250px;
	object-fit: cover;
}
.card h3 {
	margin: 10px 0 5px 0;
}
.card p {
	margin: 0 0 10px 0;
}

.modal-content-custom {
	width: 70%;
}

.modal-body {
	display: flex;
	gap: 20px;
	padding: 20px;
}

.video-section {
	flex: 2;
}

.video-section iframe {
	width: 100%;
	height: 315px;
}
.info-section {
	flex: 1;
}