.content-page { padding: var(--gap); margin-bottom: var(--gap); border-radius: var(--border-radius); background-color: #FFFFFF; overflow: hidden; }


.genreselection {  }
.genreselection .selections { display: flex; flex-wrap: wrap; gap: var(--gap); }
.genreselection .selection.selection-active {  }
.genreselection .selection a { text-transform: uppercase; display: block; background-color: #7e43b7; color: #FFFFFF; text-align: center; padding: var(--inner-gap); border-radius: var(--inner-border-radius); font-weight: 600; }
.genreselection .selection a:hover { display: block; background-color: #fdc500; color: #1a1a1a; }

@media (max-width: 767px) {
	
	.genreselection .selection { flex-basis: 100%; }
	
}

@media (min-width: 768px) and (max-width: 991px) {
	
	
	.genreselection .selection { flex-basis: calc((100% - (var(--gap) * 1)) / 2);  }
}

@media (min-width: 992px) and (max-width: 1199px) {
	
	.genreselection .selection { flex-basis: calc((100% - (var(--gap) * 2)) / 3);  }
	
}

@media (min-width: 1200px) {
	
	.genreselection .selection { flex-basis: calc((100% - (var(--gap) * 3)) / 4);  }
	
}