Template:Flavor Text/styles.css

/* large screens */
@media screen and (min-width:601px) {
	.flavor-text {
      display:grid;
      grid-template-columns:200px auto;
      border-top:1px dashed #c0c0c0;
   }

  .flavor-text div {
    	padding:5px 3px 5px 3px;
   }

   .flavor-text div:nth-of-type(4n-3), .flavor-text div:nth-of-type(4n-2) {
	background-color:#f0f0f0;
	border-bottom:1px dashed #c0c0c0;
   }

   .flavor-text div:nth-of-type(4n-1), .flavor-text div:nth-of-type(4n) {
	background-color:#ffffff;
	border-bottom:1px dashed #c0c0c0;
   }
}

/* small screens */
@media screen and (max-width:600px) {
	.flavor-text {
		display:grid;
		grid-template-columns:auto;
		border-top:1px dashed #c0c0c0;
	}
	
	.flavor-text div {
    	padding:5px 3px 5px 3px;
    }
    
    .flavor-text div:nth-of-type(4n-3) {
    	padding-top:8px;
	  background-color:#f0f0f0;
   }
   
   .flavor-text div:nth-of-type(4n-2) {
   	  background-color:#f0f0f0;
   	  border-bottom:1px dashed #c0c0c0;
   	  padding-bottom:8px;
   }

   .flavor-text div:nth-of-type(4n-1) {
   	  padding-top:8px;
      background-color:#ffffff;
   }
   
   .flavor-text div:nth-of-type(4n) {
   	  border-bottom:1px dashed #c0c0c0;
   	  background-color:#ffffff;
   	  padding-bottom:8px;
   }

}