@charset "utf-8";

/* __________ MUSIC 共通 __________ */
.music-block {
	margin-top: calc(96 * var(--px));
}
.music-summary {
	display: grid;
	justify-items: center;
	line-height: var(--leading-s);
}
.artist {
	font-size: calc(36 * var(--px));
	font-weight: 700;
}
.title {
	margin-top: calc(8 * var(--px));
	font-size: calc(56 * var(--px));
	font-weight: 700;
}
.composer {
	margin-top: calc(16 * var(--px));
	font-size: calc(22 * var(--px));
	font-weight: 700;
}
.profile-photo {
	--columns-size: calc(100vw / var(--columns));
	margin-top: calc(40 * var(--px));
	max-inline-size: calc(20 * var(--columns-size));
}
.comment-block {
	margin-top: calc(96 * var(--px));
}
.profile-block {
	margin-top: calc(64 * var(--px));
}
.head {
	color: var(--color-red);
	font-family: var(--font-oswald);
	font-size: calc(52 * var(--px));
	font-weight: 700;
}
.comment-text,
.profile-text {
	display: grid;
	row-gap: calc(20 * var(--px));
	margin-top: calc(16 * var(--px));
	font-size: calc(28 * var(--px));
	font-weight: 500;
	line-height: var(--leading-xl);
}

@media (any-hover: hover) {
}
@media (min-width: 960px) {
	.artist {
		font-size: calc(28 * var(--px));
	}
	.title {
		font-size: calc(40 * var(--px));
	}
	.composer {
		font-size: calc(18 * var(--px));
	}
	.profile-photo {
		max-inline-size: calc(16 * var(--columns-size));
	}
	.head {
		font-size: calc(40 * var(--px));
	}
	.comment-text,
	.profile-text {
		font-size: calc(20 * var(--px));
	}
}