.section--postsWrapper { width: 100%; background: #000; padding-top: 20px; position: relative; clear: both; } .blockGroup { margin: 0; padding: 0; } .blockGroup-list { list-style: none; padding: 0; margin-top: 0rem; margin-left: -25px; margin-right: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; clear: both; } .blockGroup-list li { padding: 0 10px; } .blockGroup-list .block { display: block; width: 100%; margin-bottom: 1.5rem; font-family: "Roboto", sans-serif; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; } @media (max-width: 767px) { .blockGroup-list .block { width: 100%; } } .blockGroup-list li:nth-child(1).block { width: 100%; } .blockGroup-list li:nth-child(1).block .postArticle-image { padding-top: 30%; position: center; } @media (max-width: 767px) { .blockGroup-list li:nth-child(1).block .postArticle-image { padding-top: 50%; } } .blockGroup-list li:nth-child(1).block .postArticle-title { color: #fff; font-size: 1rem; } .blockGroup-list li:nth-child(2).block, .blockGroup-list li:nth-child(3).block { width: 100%; } .blockGroup-list li:nth-child(2).block .postArticle-image { padding-top: 25%; background-size: 50%; background-position: left; } .blockGroup-list li:nth-child(3).block .postArticle-image { padding-top: 25%; background-size: 50%; background-position: right; } .blockGroup-list li:nth-child(2).block .postArticle-title, .blockGroup-list li:nth-child(3).block .postArticle-title { font-size: 1rem; } @media (max-width: 767px) { .blockGroup-list li:nth-child(2).block, .blockGroup-list li:nth-child(3).block { width: 100%; } } .blockGroup-list li .postArticle-title { color: #fff; font-size: 0.75rem; line-height: 1.5; } .blockGroup-list .postArticle-wrapper { position: relative; background: #000; width: 100%; -webkit-box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 0); box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 0); } .blockGroup-list .postArticle-wrapper:hover { -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.4, 0.4, 0.4, 0.4, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0.4, 0.4, 0.4, 1); -webkit-box-shadow: 4px 4px 4px 4px rgba(255, 255, 255, 0.8); box-shadow: 4px 4px 24px 4px rgba(255, 255, 255, 0.8); } .blockGroup-list .postArticle a { display: block; color: #fff; margin-top: 0.75rem; font-weight: 300; text-align: center; } .blockGroup-list li:nth-child(2).block .postArticle-title { display: block; color: #fff; margin-top: 0.75rem; text-align: left; font-weight: 300; } .blockGroup-list li:nth-child(3).block .postArticle-title { display: block; color: #fff; margin-top: 0.75rem; font-weight: 300; text-align: right; } .blockGroup-list .postArticle-image { background-size: 100%; background-repeat: no-repeat; background-position: center; padding-top: 100%; -webkit-transition-property: all, left, top, width; -webkit-transition-duration: .5s, .1s, .1s, .1s; -webkit-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -webkit-transition-delay: 0; -moz-transition-property: all, left, top, width; -moz-transition-duration: .5s, .1s, .1s, .1s; -moz-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -moz-transition-delay: 0; -ms-transition-property: all, left, top, width; -ms-transition-duration: .5s, .1s, .1s, .1s; -ms-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -ms-transition-delay: 0; -o-transition-property: all, left, top, width; -o-transition-duration: .5s, .1s, .1s, .1s; -o-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -o-transition-delay: 0; -webkit-transition-property: all, left, top, width; transition-property: all, left, top, width; -webkit-transition-duration: .5s, .1s, .1s, .1s; transition-duration: .5s, .1s, .1s, .1s; -webkit-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } @media (max-width: 767px) { .blockGroup-list .postArticle-image { padding-top: 50%; } } .blockGroup-list li:nth-child(2).block .block-postMeta { display: block; color: #fff; font-size: 15px; text-transform: uppercase; text-align: left; } .blockGroup-list li:nth-child(3).block .block-postMeta { display: block; bottom: 0; padding-bottom: 10px; color: #fff; font-size: 15px; text-transform: uppercase; text-align: right; } .blockGroup-list .postArticle-title, .blockGroup-list .block-postMeta { color: #fff; padding-left: 15px; padding-right: 15px; text-align: center; }