Skip to content

Instantly share code, notes, and snippets.

@cherscarlett
Last active July 12, 2017 18:42
Show Gist options
  • Save cherscarlett/c10a06be4cef8c01e9f86b8f4be65d85 to your computer and use it in GitHub Desktop.
Save cherscarlett/c10a06be4cef8c01e9f86b8f4be65d85 to your computer and use it in GitHub Desktop.
cards-marketing {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 0.75rem;
max-width: calc(640px - 1.5rem);
margin: 0 auto; }
.cards-marketing li, .cards-marketing li:nth-last-child(-n+2) {
width: 100%;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 0; }
@media (min-width: 68.75em) {
.cards-marketing li, .cards-marketing li:nth-last-child(-n+2) {
width: auto;
margin-right: 3.5rem; } }
.cards-marketing li:last-child {
margin-right: 0; }
@media (min-width: 68.75em) {
.cards-marketing[data-cards-count="3"] li .card-marketing .card-image:before {
height: calc(196.875px - 1.16667rem); } }
@media (min-width: 68.75em) {
.cards-marketing[data-cards-count="3"] li, .cards-marketing[data-cards-count="3"] li:nth-last-child(-n+2) {
max-width: calc(33% - 2.333rem); } }
@media (min-width: 68.75em) {
.cards-marketing[data-cards-count="2"] li .card-marketing .card-image:before {
height: calc(295.3125px - 1.75rem); } }
@media (min-width: 68.75em) {
.cards-marketing[data-cards-count="2"] li, .cards-marketing[data-cards-count="2"] li:nth-last-child(-n+2) {
max-width: calc(50% - 1.75rem); } }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment