@media (min-width: 1980px) and (orientation: Landscape){
	:root {
  		--font-s1: calc(var(--max-w-percent) * 3 + 10px);
  		--font-s2: calc(var(--max-w-percent) * 4 / 3 + 10px);
  		--font-s3: calc(var(--max-w-percent) * 3 / 4 + 10px);
  		--box-s: calc(var(--max-w-percent) * 20 + 200px);
	}

	#music{
		min-height: calc(100vh - var(--header-s1));
		background: black;
		flex-flow: wrap;
		justify-content: center;
		align-items: start;
		display: flex;
		align-content: flex-start;
	}

	h1.headline.music-headline{background-color: black; color: white;}

	div.music-album{
		position: relative;
		margin: calc(var(--max-w-percent) * 5);
		height: calc(var(--box-s) + 100px);
		width: var(--box-s);
	}

	img.music-album-img{
		width: var(--box-s);
		height: var(--box-s);
		border-radius: 20px;
	}

	p.music-album-data{
		font-family: Roboto-Medium;
		color: #fff;
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		padding: 10px 0px;
		text-align: left;
	}

	span.music-album-data-point{
		color: #ffffff63;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		padding: 0px 10px;
	}

	span.music-album-data-type{
		color: #ffffff63;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-transform: uppercase;
	}

	a.music-album-adress{
		position: absolute;
		left: 0px;
		top: 0px;
	}

	div.music-album-adress-img{
		position: relative;
		background: url('/photo/sys/album.png');
		background-size: 25%;
		width: var(--box-s);
		height: var(--box-s);
		top: 0px;
		left: 0px;
		transition: background-color 0.4s ease-out 0s, opacity 0.2s ease-out 0s;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		opacity: 0;
	}

	a.music-album-adress:hover .music-album-adress-img{
		background-color: #00000078;
		opacity: 1;
	}
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){	
	:root {
  		--font-s1: 50px;
  		--font-s2: calc(4vw / 3 + 10px);
  		--font-s3: calc(3vw / 4 + 10px);
  		--box-s: calc(20vw + 200px);
	}

	#music{
		min-height: calc(100vh - var(--header-s2));
		background: black;
		flex-flow: wrap;
		justify-content: center;
		align-items: start;
		display: flex;
		align-content: flex-start;
		padding: 0px calc(5vw / 2);
	}

	h1.headline.music-headline{background-color: black; color: white;}

	div.music-album{
		position: relative;
		margin: 5vw;
		height: calc(var(--box-s) + 100px);
		width: var(--box-s);
	}

	img.music-album-img{
		width: var(--box-s);
		height: var(--box-s);
		border-radius: 10px;
	}

	p.music-album-data{
		font-family: Roboto-Medium;
		color: #fff;
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		padding: 10px 0px;
		text-align: left;
	}

	span.music-album-data-point{
		color: #ffffff63;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		padding: 0px 10px;
	}

	span.music-album-data-type{
		color: #ffffff63;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-transform: uppercase;
	}

	a.music-album-adress{
		position: absolute;
		left: 0px;
		top: 0px;
	}

	div.music-album-adress-img{
		position: relative;
		background: url('/photo/sys/album.png');
		background-size: 25%;
		width: var(--box-s);
		height: var(--box-s);
		top: 0px;
		left: 0px;
		transition: background-color 0.4s ease-out 0s, opacity 0.2s ease-out 0s;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		opacity: 0;
	}

	a.music-album-adress:hover .music-album-adress-img{
		opacity: 1;
		background-color: #00000078;
	}
}

@media (max-width: 720px), (orientation: Portrait){	
	:root {
		--font-s1: 4vw;
		--font-s2: calc(5vw / 2);
		--font-s3: 2vw;
		--box-s: 30vw;
	}

	#music{
		background-color: black;
		min-height: calc(100vh - 12vw);
		flex-flow: wrap;
		justify-content: center;
		align-items: start;
		display: flex;
		align-content: flex-start;
	}

	h1.headline.music-headline{background-color: black; color: white;}

	div.music-album{
		position: relative;
		margin: 5vw;
		height: calc(var(--box-s) + 10vw);
		width: var(--box-s);
	}

	img.music-album-img{
		width: var(--box-s);
		height: var(--box-s);
		border-radius: 1vw;
	}

	p.music-album-data{
		font-family: Roboto-Medium;
		color: #fff;
		line-height: var(--font-s2);
		font-size: var(--font-s2);
		padding: calc(1vw / 2) 0px;
		text-align: left;
	}

	span.music-album-data-point{
		color: #ffffff63;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		padding: 0px calc(1vw / 2);
	}

	span.music-album-data-type{
		color: #ffffff63;
		line-height: var(--font-s3);
		font-size: var(--font-s3);
		text-transform: uppercase;
	}

	a.music-album-adress{
		position: absolute;
		left: 0px;
		top: 0px;
	}

	div.music-album-adress-img{
		position: relative;
		background: url('/photo/sys/album.png');
		background-size: 25%;
		width: var(--box-s);
		height: var(--box-s);
		top: 0px;
		left: 0px;
		transition: background-color 0.4s ease-out 0s, opacity 0.2s ease-out 0s;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		opacity: 0;
	}

	a.music-album-adress:hover .music-album-adress-img{
		opacity: 1;
		background-color: #00000078;
	}
}