1.gridBlock { 2 margin: -5px 0; 3 padding: 0; 4 padding-bottom: 20px; 5 6 .blockElement { 7 padding: 5px 0; 8 9 img { 10 max-width: 100%; 11 } 12 13 h3 { 14 border-bottom: 1px solid rgba($primary-bg, 0.5); 15 color: $primary-bg; 16 font-size: 18px; 17 margin: 0; 18 padding: 10px 0; 19 } 20 } 21 22 .gridClear { 23 clear: both; 24 } 25 26} 27 28.gridBlock .alignCenter { 29 text-align: center; 30} 31.gridBlock .alignRight { 32 text-align: right; 33} 34.gridBlock .imageAlignSide { 35 align-items: center; 36 display: flex; 37 flex-flow: row wrap; 38} 39.blockImage { 40 max-width: 150px; 41 width: 50%; 42} 43.imageAlignTop .blockImage { 44 margin-bottom: 20px; 45} 46.imageAlignTop.alignCenter .blockImage { 47 margin-left: auto; 48 margin-right: auto; 49} 50.imageAlignSide .blockImage { 51 flex: 0 1 100px; 52 margin-right: 20px; 53} 54.imageAlignSide .blockContent { 55 flex: 1 1; 56} 57 58@media only screen and (max-width: 1023px) { 59 .responsiveList .blockContent { 60 position: relative; 61 } 62 .responsiveList .blockContent > div { 63 padding-left: 20px; 64 } 65 .responsiveList .blockContent::before { 66 content: "\2022"; 67 position: absolute; 68 } 69} 70 71@media only screen and (min-width: 1024px) { 72 .gridBlock { 73 display: flex; 74 flex-direction: row; 75 flex-wrap: wrap; 76 margin: -10px -10px 10px -10px; 77 78 .twoByGridBlock { 79 box-sizing: border-box; 80 flex: 1 0 50%; 81 padding: 10px; 82 } 83 84 .fourByGridBlock { 85 box-sizing: border-box; 86 flex: 1 0 25%; 87 padding: 10px; 88 } 89 } 90 91 h2 + .gridBlock { 92 padding-top: 20px; 93 } 94} 95 96@media only screen and (min-width: 1400px) { 97 .gridBlock { 98 display: flex; 99 flex-direction: row; 100 flex-wrap: wrap; 101 margin: -10px -20px 10px -20px; 102 103 .twoByGridBlock { 104 box-sizing: border-box; 105 flex: 1 0 50%; 106 padding: 10px 20px; 107 } 108 109 .fourByGridBlock { 110 box-sizing: border-box; 111 flex: 1 0 25%; 112 padding: 10px 20px; 113 } 114 } 115}