.passage-title { background-color:#c3cce4; } @media screen and (max-width: 599px) { passage .passage-text { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; } } @media screen and (min-width: 600px) and (max-width: 849px) { passage .passage-text { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; } } @media screen and (min-width: 850px) { passage .passage-text { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; } }