/** * @file * Block grid based on Foundation 5. * * This is a modified version to be re-usable for divities, not only UL/OL list, * as long as the list item has class "grid". */ .block-grid, .blazy.block-grid, .item-list > .block-grid { clear: both; display: block; list-style: none; padding: 0; margin: 0 -0.625rem; } .block-grid::before, .block-grid::after { content: " "; display: table; } .block-grid::after { clear: both; } .block-grid > .grid { display: block; float: left; height: auto; list-style: none; margin: 0; padding: 0 0.625rem 1.25rem; } .block-grid.block-grid--centered, .item-list > .block-grid.block-grid--centered { text-align: center; } .block-grid.block-grid--centered > .grid, .item-list > .block-grid.block-grid--centered > .grid { text-align: left; display: inline-block; float: none; vertical-align: top; } .block-grid .grid__content { position: relative; } @media only screen { .small-block-grid-1 > .grid { width: 100%; } .small-block-grid-2 > .grid { width: 50%; } .small-block-grid-3 > .grid { width: 33.33333%; } .small-block-grid-4 > .grid { width: 25%; } .small-block-grid-5 > .grid { width: 20%; } .small-block-grid-6 > .grid { width: 16.66667%; } .small-block-grid-7 > .grid { width: 14.28571%; } .small-block-grid-8 > .grid { width: 12.5%; } .small-block-grid-9 > .grid { width: 11.11111%; } .small-block-grid-10 > .grid { width: 10%; } .small-block-grid-11 > .grid { width: 9.09091%; } .small-block-grid-12 > .grid { width: 8.33333%; } .small-block-grid-1 > .grid:nth-of-type(1n), .small-block-grid-2 > .grid:nth-of-type(1n), .small-block-grid-3 > .grid:nth-of-type(1n), .small-block-grid-4 > .grid:nth-of-type(1n), .small-block-grid-5 > .grid:nth-of-type(1n), .small-block-grid-6 > .grid:nth-of-type(1n), .small-block-grid-8 > .grid:nth-of-type(1n), .small-block-grid-7 > .grid:nth-of-type(1n), .small-block-grid-9 > .grid:nth-of-type(1n), .small-block-grid-10 > .grid:nth-of-type(1n), .small-block-grid-11 > .grid:nth-of-type(1n), .small-block-grid-12 > .grid:nth-of-type(1n) { clear: none; } .small-block-grid-1 > .grid:nth-of-type(1n+1), .small-block-grid-2 > .grid:nth-of-type(2n+1), .small-block-grid-3 > .grid:nth-of-type(3n+1), .small-block-grid-4 > .grid:nth-of-type(4n+1), .small-block-grid-5 > .grid:nth-of-type(5n+1), .small-block-grid-6 > .grid:nth-of-type(6n+1), .small-block-grid-7 > .grid:nth-of-type(7n+1), .small-block-grid-8 > .grid:nth-of-type(8n+1), .small-block-grid-9 > .grid:nth-of-type(9n+1), .small-block-grid-10 > .grid:nth-of-type(10n+1), .small-block-grid-11 > .grid:nth-of-type(11n+1), .small-block-grid-12 > .grid:nth-of-type(12n+1) { clear: both; } } /** 641px with 16px base font. */ @media only screen and (min-width: 40.063em) { .medium-block-grid-1 > .grid { width: 100%; } .medium-block-grid-2 > .grid { width: 50%; } .medium-block-grid-3 > .grid { width: 33.33333%; } .medium-block-grid-4 > .grid { width: 25%; } .medium-block-grid-5 > .grid { width: 20%; } .medium-block-grid-6 > .grid { width: 16.66667%; } .medium-block-grid-7 > .grid { width: 14.28571%; } .medium-block-grid-8 > .grid { width: 12.5%; } .medium-block-grid-9 > .grid { width: 11.11111%; } .medium-block-grid-10 > .grid { width: 10%; } .medium-block-grid-11 > .grid { width: 9.09091%; } .medium-block-grid-12 > .grid { width: 8.33333%; } .medium-block-grid-1 > .grid:nth-of-type(1n), .medium-block-grid-2 > .grid:nth-of-type(1n), .medium-block-grid-3 > .grid:nth-of-type(1n), .medium-block-grid-4 > .grid:nth-of-type(1n), .medium-block-grid-5 > .grid:nth-of-type(1n), .medium-block-grid-6 > .grid:nth-of-type(1n), .medium-block-grid-7 > .grid:nth-of-type(1n), .medium-block-grid-8 > .grid:nth-of-type(1n), .medium-block-grid-9 > .grid:nth-of-type(1n), .medium-block-grid-10 > .grid:nth-of-type(1n), .medium-block-grid-11 > .grid:nth-of-type(1n), .medium-block-grid-12 > .grid:nth-of-type(1n) { clear: none; } .medium-block-grid-1 > .grid:nth-of-type(1n+1), .medium-block-grid-2 > .grid:nth-of-type(2n+1), .medium-block-grid-3 > .grid:nth-of-type(3n+1), .medium-block-grid-4 > .grid:nth-of-type(4n+1), .medium-block-grid-5 > .grid:nth-of-type(5n+1), .medium-block-grid-6 > .grid:nth-of-type(6n+1), .medium-block-grid-7 > .grid:nth-of-type(7n+1), .medium-block-grid-8 > .grid:nth-of-type(8n+1), .medium-block-grid-9 > .grid:nth-of-type(9n+1), .medium-block-grid-10 > .grid:nth-of-type(10n+1), .medium-block-grid-11 > .grid:nth-of-type(11n+1), .medium-block-grid-12 > .grid:nth-of-type(12n+1) { clear: both; } } /** 1025px with 16px base font. */ @media only screen and (min-width: 64.063em) { .large-block-grid-1 > .grid { width: 100%; } .large-block-grid-2 > .grid { width: 50%; } .large-block-grid-3 > .grid { width: 33.33333%; } .large-block-grid-4 > .grid { width: 25%; } .large-block-grid-5 > .grid { width: 20%; } .large-block-grid-6 > .grid { width: 16.66667%; } .large-block-grid-7 > .grid { width: 14.28571%; } .large-block-grid-8 > .grid { width: 12.5%; } .large-block-grid-9 > .grid { width: 11.11111%; } .large-block-grid-10 > .grid { width: 10%; } .large-block-grid-11 > .grid { width: 9.09091%; } .large-block-grid-12 > .grid { width: 8.33333%; } .large-block-grid-1 > .grid:nth-of-type(1n), .large-block-grid-2 > .grid:nth-of-type(1n), .large-block-grid-3 > .grid:nth-of-type(1n), .large-block-grid-4 > .grid:nth-of-type(1n), .large-block-grid-5 > .grid:nth-of-type(1n), .large-block-grid-6 > .grid:nth-of-type(1n), .large-block-grid-7 > .grid:nth-of-type(1n), .large-block-grid-8 > .grid:nth-of-type(1n), .large-block-grid-9 > .grid:nth-of-type(1n), .large-block-grid-10 > .grid:nth-of-type(1n), .large-block-grid-11 > .grid:nth-of-type(1n), .large-block-grid-12 > .grid:nth-of-type(1n) { clear: none; } .large-block-grid-1 > .grid:nth-of-type(1n+1), .large-block-grid-2 > .grid:nth-of-type(2n+1), .large-block-grid-3 > .grid:nth-of-type(3n+1), .large-block-grid-4 > .grid:nth-of-type(4n+1), .large-block-grid-5 > .grid:nth-of-type(5n+1), .large-block-grid-6 > .grid:nth-of-type(6n+1), .large-block-grid-7 > .grid:nth-of-type(7n+1), .large-block-grid-8 > .grid:nth-of-type(8n+1), .large-block-grid-9 > .grid:nth-of-type(9n+1), .large-block-grid-10 > .grid:nth-of-type(10n+1), .large-block-grid-11 > .grid:nth-of-type(11n+1), .large-block-grid-12 > .grid:nth-of-type(12n+1) { clear: both; } }