/* Bandbreite, official website
   v2.0 | 2023-03, created by Filip Chudzinski
*/

#card {
	margin-bottom: 24px;
	height: auto; min-height: 24px;
}

.card__facts__year {
	margin: 0; padding: 0 0 0 0;
	min-height: 24px; width: 50px; display: block;
	float: left;
}

@media only screen and (min-width: 768px) {
.card__facts__year {
	margin: 0; padding: 0 0 0 0;
	min-height: 24px; width: 100px; display: block;
	float: left;
}
}

@media only screen and (min-width: 1024px) {

}

.count_year {
	display: block;
	font-weight: 400;
	opacity: 0.25;
}

.date {
	font-weight: 600;
}

.tagline {
	margin: 6px 0;
	font-weight: 600;
}

@media only screen and (min-width: 768px) {
.tagline {
	margin: 0px 0;
	font-weight: 600;
}
}

@media only screen and (min-width: 1024px) {

}

#bands {
	margin-top: 6px;
	opacity: 0.5;
}

#card__facts {
	margin: 0 0 0 56px; padding: 0 0 0 24px;
	display: block;
	border-left: 1px solid rgba(32,32,32,1);
}

@media only screen and (min-width: 768px) {
#card__facts {
	margin: 0 0 0 100px; padding: 0 0 0 24px;
	display: block;
	border-left: 1px solid rgba(32,32,32,1);
}
}

@media only screen and (min-width: 1024px) {

}

#card__facts__entry {
	margin: 0; margin-bottom: 36px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 0px; 
	grid-template-columns: 100%;
}

@media only screen and (min-width: 768px) {
#card__facts__entry {
	margin: 0; margin-bottom: 36px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0px; 
	grid-template-columns: 200px auto 100px;
}
}

@media only screen and (min-width: 1024px) {

}

.last {
	margin-bottom: 0px !important;
}

#card__facts__counter {
	display: none;
}	

@media only screen and (min-width: 768px) {
#card__facts__counter {
	margin: 0 0 0 20px; padding: 0px 6px;
	display: block; width: 80px; height: 32px; line-height: 32px; float: right;
	border-radius: 100px;
	background: rgba(0,0,0,1);
	color: rgba(255,255,255,1);
	text-align: center;
	font-weight: 600;
}	
}

@media only screen and (min-width: 1024px) {

}

#swatches {
	margin: 0; padding: 0;
	margin-top: 6px;
	height: 24px; display: block;
}

#swatches img {
	height: 18px; width: 18px;
	display: block; float: left;
	margin-right: 4px;
}