@import './_variables.scss'; .jp-wordads-dashboard-wrap { display: flex; align-items: center; justify-content: center; flex-flow: column nowrap; width: 100%; margin: 0 auto; } .jp-wordads-dashboard-row { display: grid; grid-gap: 24px; grid-template-columns: repeat( 4, 1fr ); width: calc( 100% - 32px ); margin: 0 16px; @include for-phone-up { grid-template-columns: repeat( 8, 1fr ); width: calc( 100% - 36px ); margin: 0 18px; } @include for-tablet-up { grid-template-columns: repeat( 12, 1fr ); max-width: 1128px; width: calc( 100% - 48px ); margin: 0 24px; } @for $i from 1 through 4 { .sm-col-span-#{$i} { grid-column-end: span #{$i}; } } @include for-phone-up { @for $i from 1 through 8 { .md-col-span-#{$i} { grid-column-end: span #{$i}; } } } @include for-tablet-up { @for $i from 1 through 12 { .lg-col-span-#{$i} { grid-column-end: span #{$i}; } } } @include for-tablet-up { .lg-col-span-0 { display: none; } } @include for-tablet-down { .md-col-span-0 { display: none; } } @include for-phone-down { .sm-col-span-0 { display: none; } .sm-col-span-1 { display: block; } } }