$card-group-margin: .25rem; // Assuming Boost default preset is used. $card-deck-margin: $card-group-margin !default; $card-gutter : $card-deck-margin * 2; body.zoomin { .dashboard-card-deck:not(.fixed-width-cards) { @media (min-width: 576px) { .dashboard-card { width: calc(100% - #{$card-gutter}); } } @media (min-width: 840px) { .dashboard-card { width: calc(50% - #{$card-gutter}); } } @media (min-width: 1100px) { .dashboard-card { width: calc(33.33% - #{$card-gutter}); } } @media (min-width: 1360px) { .dashboard-card { width: calc(25% - #{$card-gutter}); } } } } body:not(.zoomin) { .dashboard-card-deck:not(.fixed-width-cards) { @media (min-width: 576px) { .dashboard-card { width: calc(100% - #{$card-gutter}); } } @media (min-width: 768px) { .dashboard-card { width: calc(50% - #{$card-gutter}); } } @media (min-width: 1100px) { .dashboard-card { width: calc(33.33% - #{$card-gutter}); } } @media (min-width: 1360px) { .dashboard-card { width: calc(25% - #{$card-gutter}); } } } } body:not(.zoomin) #page.fullin { .dashboard-card-deck:not(.fixed-width-cards) { @media (min-width: 576px) { .dashboard-card { width: calc(100% - #{$card-gutter}); } } @media (min-width: 768px) { .dashboard-card { width: calc(50% - #{$card-gutter}); } } @media (min-width: 1100px) { .dashboard-card { width: calc(33.33% - #{$card-gutter}); } } @media (min-width: 1360px) { .dashboard-card { width: calc(25% - #{$card-gutter}); } } } } body.zoomin #page.fullin { .dashboard-card-deck:not(.fixed-width-cards) { @media (min-width: 576px) { .dashboard-card { width: calc(50% - #{$card-gutter}); } } @media (min-width: 840px) { .dashboard-card { width: calc(33.33% - #{$card-gutter}); } } @media (min-width: 1100px) { .dashboard-card { width: calc(25% - #{$card-gutter}); } } @media (min-width: 1360px) { .dashboard-card { width: calc(20% - #{$card-gutter}); } } } }