/***********************************/
/* Responsive Music Box CSS */
/***********************************/
/* This is an experimental stylesheet used to generate responsive content */
/* Music + BGM Box */
.responsive-width {
float: left;
width: 100%;
height: 100%;
}
/* Flexbox container (list) */
ul.musicbgmbox {
list-style-type: none;
display: flex;
flex-wrap: wrap;
margin: auto;
padding: 0;
}
/* Flexbox element (list element) */
/* Contains the Music + BGM Box Template */
ul.musicbgmbox > li{
display: block;
float: left;
flex-basis: 100%;
min-height: 0;
}
/* Responsive resizing based on screen width. */
@media only screen and (min-width: 1200px) {
ul.musicbgmbox > li{
flex-basis: 50%;
}
}
@media only screen and (min-width: 2400px) {
ul.musicbgmbox > li{
flex-basis: 33.33%;
}
}
@media only screen and (min-width: 3600px) {
ul.musicbgmbox > li{
flex-basis: 25%;
}
}
/* For small screen widths, avoid squashed cells by making each cell expand to take up the whole row */
@media only screen and (max-width: 475px) {
ul.musicbgmbox td {
display: block;
width: auto;
}
}