4-row-components edit

/* scss/4-row-components/_wm-cards-component.scss */ $cards-gap: 20px; .wm-cards { list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; // margin: 0 auto; padding: 0; max-width: 1250px; // part 1 of a hack to set gap until gap property is more supported position: relative; left: calc(#{$cards-gap}/ 2 * -1); top: 0; margin-bottom: -#{$cards-gap}; // for browsers that support the gap property @supports ((text-transform: full-size-kana) or (translate: 10px) or (content-visibility: auto)) { gap: $cards-gap; left: 0; margin-bottom: 0; } // CARD LAYOUTS // keep widths narrow to keep correct card numbers on each row @include breakpoint(860px) { &.--cards4 { max-width: 870px; transition: none; } &.--cards9 { max-width: 1070px; } @include breakpoint(1160px) { &.--cards5, &.--cards6, &.--cards7 { max-width: 1070px; transition: none; } &.--landscape.--cards5, &.--landscape.--cards6, &.--landscape.--cards7 { max-width: 1200px; } } } @include breakpoint(1275px) { &.--cards4 { max-width: 1250px; } } @include breakpoint(1288px) { &.--cards4 { max-width: 100%; } &.--cards7 { max-width: 1288px; } } & > .wm-card { // part 2 of a hack to set gap until gap property is more supported margin-left: $cards-gap !important; margin-bottom: $cards-gap !important; // for browsers that support the gap property @supports ((text-transform: full-size-kana) or (translate: 10px) or (content-visibility: auto)) { margin-left: 0 !important; margin-bottom: 0 !important; } } }