Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bulma SCSS columns
.column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: 0.75rem;
}
.columns {
&.is-mobile > .column {
&.is-narrow {
flex: none;
}
&.is-full {
flex: none;
width: 100%;
}
&.is-three-quarters {
flex: none;
width: 75%;
}
&.is-two-thirds {
flex: none;
width: 66.6666%;
}
&.is-half {
flex: none;
width: 50%;
}
&.is-one-third {
flex: none;
width: 33.3333%;
}
&.is-one-quarter {
flex: none;
width: 25%;
}
&.is-one-fifth {
flex: none;
width: 20%;
}
&.is-two-fifths {
flex: none;
width: 40%;
}
&.is-three-fifths {
flex: none;
width: 60%;
}
&.is-four-fifths {
flex: none;
width: 80%;
}
&.is-offset-three-quarters {
margin-left: 75%;
}
&.is-offset-two-thirds {
margin-left: 66.6666%;
}
&.is-offset-half {
margin-left: 50%;
}
&.is-offset-one-third {
margin-left: 33.3333%;
}
&.is-offset-one-quarter {
margin-left: 25%;
}
&.is-offset-one-fifth {
margin-left: 20%;
}
&.is-offset-two-fifths {
margin-left: 40%;
}
&.is-offset-three-fifths {
margin-left: 60%;
}
&.is-offset-four-fifths {
margin-left: 80%;
}
&.is-1 {
flex: none;
width: 8.33333%;
}
&.is-offset-1 {
margin-left: 8.33333%;
}
&.is-2 {
flex: none;
width: 16.66667%;
}
&.is-offset-2 {
margin-left: 16.66667%;
}
&.is-3 {
flex: none;
width: 25%;
}
&.is-offset-3 {
margin-left: 25%;
}
&.is-4 {
flex: none;
width: 33.33333%;
}
&.is-offset-4 {
margin-left: 33.33333%;
}
&.is-5 {
flex: none;
width: 41.66667%;
}
&.is-offset-5 {
margin-left: 41.66667%;
}
&.is-6 {
flex: none;
width: 50%;
}
&.is-offset-6 {
margin-left: 50%;
}
&.is-7 {
flex: none;
width: 58.33333%;
}
&.is-offset-7 {
margin-left: 58.33333%;
}
&.is-8 {
flex: none;
width: 66.66667%;
}
&.is-offset-8 {
margin-left: 66.66667%;
}
&.is-9 {
flex: none;
width: 75%;
}
&.is-offset-9 {
margin-left: 75%;
}
&.is-10 {
flex: none;
width: 83.33333%;
}
&.is-offset-10 {
margin-left: 83.33333%;
}
&.is-11 {
flex: none;
width: 91.66667%;
}
&.is-offset-11 {
margin-left: 91.66667%;
}
&.is-12 {
flex: none;
width: 100%;
}
&.is-offset-12 {
margin-left: 100%;
}
}
margin-left: -0.75rem;
margin-right: -0.75rem;
margin-top: -0.75rem;
&:last-child {
margin-bottom: -0.75rem;
}
&:not(:last-child) {
margin-bottom: calc(1.5rem - 0.75rem);
}
&.is-centered {
justify-content: center;
}
&.is-gapless {
margin-left: 0;
margin-right: 0;
margin-top: 0;
> .column {
margin: 0;
padding: 0 !important;
}
&:not(:last-child) {
margin-bottom: 1.5rem;
}
&:last-child {
margin-bottom: 0;
}
}
&.is-mobile {
display: flex;
}
&.is-multiline {
flex-wrap: wrap;
}
&.is-vcentered {
align-items: center;
}
&.is-variable {
--columnGap: 0.75rem;
margin-left: calc(-1 * var(--columnGap));
margin-right: calc(-1 * var(--columnGap));
.column {
padding-left: var(--columnGap);
padding-right: var(--columnGap);
}
&.is-0 {
--columnGap: 0rem;
}
&.is-1 {
--columnGap: 0.25rem;
}
&.is-2 {
--columnGap: 0.5rem;
}
&.is-3 {
--columnGap: 0.75rem;
}
&.is-4 {
--columnGap: 1rem;
}
&.is-5 {
--columnGap: 1.25rem;
}
&.is-6 {
--columnGap: 1.5rem;
}
&.is-7 {
--columnGap: 1.75rem;
}
&.is-8 {
--columnGap: 2rem;
}
}
}
@media screen and (max-width: 768px) {
.column {
&.is-narrow-mobile {
flex: none;
}
&.is-full-mobile {
flex: none;
width: 100%;
}
&.is-three-quarters-mobile {
flex: none;
width: 75%;
}
&.is-two-thirds-mobile {
flex: none;
width: 66.6666%;
}
&.is-half-mobile {
flex: none;
width: 50%;
}
&.is-one-third-mobile {
flex: none;
width: 33.3333%;
}
&.is-one-quarter-mobile {
flex: none;
width: 25%;
}
&.is-one-fifth-mobile {
flex: none;
width: 20%;
}
&.is-two-fifths-mobile {
flex: none;
width: 40%;
}
&.is-three-fifths-mobile {
flex: none;
width: 60%;
}
&.is-four-fifths-mobile {
flex: none;
width: 80%;
}
&.is-offset-three-quarters-mobile {
margin-left: 75%;
}
&.is-offset-two-thirds-mobile {
margin-left: 66.6666%;
}
&.is-offset-half-mobile {
margin-left: 50%;
}
&.is-offset-one-third-mobile {
margin-left: 33.3333%;
}
&.is-offset-one-quarter-mobile {
margin-left: 25%;
}
&.is-offset-one-fifth-mobile {
margin-left: 20%;
}
&.is-offset-two-fifths-mobile {
margin-left: 40%;
}
&.is-offset-three-fifths-mobile {
margin-left: 60%;
}
&.is-offset-four-fifths-mobile {
margin-left: 80%;
}
&.is-1-mobile {
flex: none;
width: 8.33333%;
}
&.is-offset-1-mobile {
margin-left: 8.33333%;
}
&.is-2-mobile {
flex: none;
width: 16.66667%;
}
&.is-offset-2-mobile {
margin-left: 16.66667%;
}
&.is-3-mobile {
flex: none;
width: 25%;
}
&.is-offset-3-mobile {
margin-left: 25%;
}
&.is-4-mobile {
flex: none;
width: 33.33333%;
}
&.is-offset-4-mobile {
margin-left: 33.33333%;
}
&.is-5-mobile {
flex: none;
width: 41.66667%;
}
&.is-offset-5-mobile {
margin-left: 41.66667%;
}
&.is-6-mobile {
flex: none;
width: 50%;
}
&.is-offset-6-mobile {
margin-left: 50%;
}
&.is-7-mobile {
flex: none;
width: 58.33333%;
}
&.is-offset-7-mobile {
margin-left: 58.33333%;
}
&.is-8-mobile {
flex: none;
width: 66.66667%;
}
&.is-offset-8-mobile {
margin-left: 66.66667%;
}
&.is-9-mobile {
flex: none;
width: 75%;
}
&.is-offset-9-mobile {
margin-left: 75%;
}
&.is-10-mobile {
flex: none;
width: 83.33333%;
}
&.is-offset-10-mobile {
margin-left: 83.33333%;
}
&.is-11-mobile {
flex: none;
width: 91.66667%;
}
&.is-offset-11-mobile {
margin-left: 91.66667%;
}
&.is-12-mobile {
flex: none;
width: 100%;
}
&.is-offset-12-mobile {
margin-left: 100%;
}
}
}
@media screen and (min-width: 769px), print {
.column {
&.is-narrow, &.is-narrow-tablet {
flex: none;
}
&.is-full, &.is-full-tablet {
flex: none;
width: 100%;
}
&.is-three-quarters, &.is-three-quarters-tablet {
flex: none;
width: 75%;
}
&.is-two-thirds, &.is-two-thirds-tablet {
flex: none;
width: 66.6666%;
}
&.is-half, &.is-half-tablet {
flex: none;
width: 50%;
}
&.is-one-third, &.is-one-third-tablet {
flex: none;
width: 33.3333%;
}
&.is-one-quarter, &.is-one-quarter-tablet {
flex: none;
width: 25%;
}
&.is-one-fifth, &.is-one-fifth-tablet {
flex: none;
width: 20%;
}
&.is-two-fifths, &.is-two-fifths-tablet {
flex: none;
width: 40%;
}
&.is-three-fifths, &.is-three-fifths-tablet {
flex: none;
width: 60%;
}
&.is-four-fifths, &.is-four-fifths-tablet {
flex: none;
width: 80%;
}
&.is-offset-three-quarters, &.is-offset-three-quarters-tablet {
margin-left: 75%;
}
&.is-offset-two-thirds, &.is-offset-two-thirds-tablet {
margin-left: 66.6666%;
}
&.is-offset-half, &.is-offset-half-tablet {
margin-left: 50%;
}
&.is-offset-one-third, &.is-offset-one-third-tablet {
margin-left: 33.3333%;
}
&.is-offset-one-quarter, &.is-offset-one-quarter-tablet {
margin-left: 25%;
}
&.is-offset-one-fifth, &.is-offset-one-fifth-tablet {
margin-left: 20%;
}
&.is-offset-two-fifths, &.is-offset-two-fifths-tablet {
margin-left: 40%;
}
&.is-offset-three-fifths, &.is-offset-three-fifths-tablet {
margin-left: 60%;
}
&.is-offset-four-fifths, &.is-offset-four-fifths-tablet {
margin-left: 80%;
}
&.is-1, &.is-1-tablet {
flex: none;
width: 8.33333%;
}
&.is-offset-1, &.is-offset-1-tablet {
margin-left: 8.33333%;
}
&.is-2, &.is-2-tablet {
flex: none;
width: 16.66667%;
}
&.is-offset-2, &.is-offset-2-tablet {
margin-left: 16.66667%;
}
&.is-3, &.is-3-tablet {
flex: none;
width: 25%;
}
&.is-offset-3, &.is-offset-3-tablet {
margin-left: 25%;
}
&.is-4, &.is-4-tablet {
flex: none;
width: 33.33333%;
}
&.is-offset-4, &.is-offset-4-tablet {
margin-left: 33.33333%;
}
&.is-5, &.is-5-tablet {
flex: none;
width: 41.66667%;
}
&.is-offset-5, &.is-offset-5-tablet {
margin-left: 41.66667%;
}
&.is-6, &.is-6-tablet {
flex: none;
width: 50%;
}
&.is-offset-6, &.is-offset-6-tablet {
margin-left: 50%;
}
&.is-7, &.is-7-tablet {
flex: none;
width: 58.33333%;
}
&.is-offset-7, &.is-offset-7-tablet {
margin-left: 58.33333%;
}
&.is-8, &.is-8-tablet {
flex: none;
width: 66.66667%;
}
&.is-offset-8, &.is-offset-8-tablet {
margin-left: 66.66667%;
}
&.is-9, &.is-9-tablet {
flex: none;
width: 75%;
}
&.is-offset-9, &.is-offset-9-tablet {
margin-left: 75%;
}
&.is-10, &.is-10-tablet {
flex: none;
width: 83.33333%;
}
&.is-offset-10, &.is-offset-10-tablet {
margin-left: 83.33333%;
}
&.is-11, &.is-11-tablet {
flex: none;
width: 91.66667%;
}
&.is-offset-11, &.is-offset-11-tablet {
margin-left: 91.66667%;
}
&.is-12, &.is-12-tablet {
flex: none;
width: 100%;
}
&.is-offset-12, &.is-offset-12-tablet {
margin-left: 100%;
}
}
}
@media screen and (max-width: 1087px) {
.column {
&.is-narrow-touch {
flex: none;
}
&.is-full-touch {
flex: none;
width: 100%;
}
&.is-three-quarters-touch {
flex: none;
width: 75%;
}
&.is-two-thirds-touch {
flex: none;
width: 66.6666%;
}
&.is-half-touch {
flex: none;
width: 50%;
}
&.is-one-third-touch {
flex: none;
width: 33.3333%;
}
&.is-one-quarter-touch {
flex: none;
width: 25%;
}
&.is-one-fifth-touch {
flex: none;
width: 20%;
}
&.is-two-fifths-touch {
flex: none;
width: 40%;
}
&.is-three-fifths-touch {
flex: none;
width: 60%;
}
&.is-four-fifths-touch {
flex: none;
width: 80%;
}
&.is-offset-three-quarters-touch {
margin-left: 75%;
}
&.is-offset-two-thirds-touch {
margin-left: 66.6666%;
}
&.is-offset-half-touch {
margin-left: 50%;
}
&.is-offset-one-third-touch {
margin-left: 33.3333%;
}
&.is-offset-one-quarter-touch {
margin-left: 25%;
}
&.is-offset-one-fifth-touch {
margin-left: 20%;
}
&.is-offset-two-fifths-touch {
margin-left: 40%;
}
&.is-offset-three-fifths-touch {
margin-left: 60%;
}
&.is-offset-four-fifths-touch {
margin-left: 80%;
}
&.is-1-touch {
flex: none;
width: 8.33333%;
}
&.is-offset-1-touch {
margin-left: 8.33333%;
}
&.is-2-touch {
flex: none;
width: 16.66667%;
}
&.is-offset-2-touch {
margin-left: 16.66667%;
}
&.is-3-touch {
flex: none;
width: 25%;
}
&.is-offset-3-touch {
margin-left: 25%;
}
&.is-4-touch {
flex: none;
width: 33.33333%;
}
&.is-offset-4-touch {
margin-left: 33.33333%;
}
&.is-5-touch {
flex: none;
width: 41.66667%;
}
&.is-offset-5-touch {
margin-left: 41.66667%;
}
&.is-6-touch {
flex: none;
width: 50%;
}
&.is-offset-6-touch {
margin-left: 50%;
}
&.is-7-touch {
flex: none;
width: 58.33333%;
}
&.is-offset-7-touch {
margin-left: 58.33333%;
}
&.is-8-touch {
flex: none;
width: 66.66667%;
}
&.is-offset-8-touch {
margin-left: 66.66667%;
}
&.is-9-touch {
flex: none;
width: 75%;
}
&.is-offset-9-touch {
margin-left: 75%;
}
&.is-10-touch {
flex: none;
width: 83.33333%;
}
&.is-offset-10-touch {
margin-left: 83.33333%;
}
&.is-11-touch {
flex: none;
width: 91.66667%;
}
&.is-offset-11-touch {
margin-left: 91.66667%;
}
&.is-12-touch {
flex: none;
width: 100%;
}
&.is-offset-12-touch {
margin-left: 100%;
}
}
}
@media screen and (min-width: 1088px) {
.column {
&.is-narrow-desktop {
flex: none;
}
&.is-full-desktop {
flex: none;
width: 100%;
}
&.is-three-quarters-desktop {
flex: none;
width: 75%;
}
&.is-two-thirds-desktop {
flex: none;
width: 66.6666%;
}
&.is-half-desktop {
flex: none;
width: 50%;
}
&.is-one-third-desktop {
flex: none;
width: 33.3333%;
}
&.is-one-quarter-desktop {
flex: none;
width: 25%;
}
&.is-one-fifth-desktop {
flex: none;
width: 20%;
}
&.is-two-fifths-desktop {
flex: none;
width: 40%;
}
&.is-three-fifths-desktop {
flex: none;
width: 60%;
}
&.is-four-fifths-desktop {
flex: none;
width: 80%;
}
&.is-offset-three-quarters-desktop {
margin-left: 75%;
}
&.is-offset-two-thirds-desktop {
margin-left: 66.6666%;
}
&.is-offset-half-desktop {
margin-left: 50%;
}
&.is-offset-one-third-desktop {
margin-left: 33.3333%;
}
&.is-offset-one-quarter-desktop {
margin-left: 25%;
}
&.is-offset-one-fifth-desktop {
margin-left: 20%;
}
&.is-offset-two-fifths-desktop {
margin-left: 40%;
}
&.is-offset-three-fifths-desktop {
margin-left: 60%;
}
&.is-offset-four-fifths-desktop {
margin-left: 80%;
}
&.is-1-desktop {
flex: none;
width: 8.33333%;
}
&.is-offset-1-desktop {
margin-left: 8.33333%;
}
&.is-2-desktop {
flex: none;
width: 16.66667%;
}
&.is-offset-2-desktop {
margin-left: 16.66667%;
}
&.is-3-desktop {
flex: none;
width: 25%;
}
&.is-offset-3-desktop {
margin-left: 25%;
}
&.is-4-desktop {
flex: none;
width: 33.33333%;
}
&.is-offset-4-desktop {
margin-left: 33.33333%;
}
&.is-5-desktop {
flex: none;
width: 41.66667%;
}
&.is-offset-5-desktop {
margin-left: 41.66667%;
}
&.is-6-desktop {
flex: none;
width: 50%;
}
&.is-offset-6-desktop {
margin-left: 50%;
}
&.is-7-desktop {
flex: none;
width: 58.33333%;
}
&.is-offset-7-desktop {
margin-left: 58.33333%;
}
&.is-8-desktop {
flex: none;
width: 66.66667%;
}
&.is-offset-8-desktop {
margin-left: 66.66667%;
}
&.is-9-desktop {
flex: none;
width: 75%;
}
&.is-offset-9-desktop {
margin-left: 75%;
}
&.is-10-desktop {
flex: none;
width: 83.33333%;
}
&.is-offset-10-desktop {
margin-left: 83.33333%;
}
&.is-11-desktop {
flex: none;
width: 91.66667%;
}
&.is-offset-11-desktop {
margin-left: 91.66667%;
}
&.is-12-desktop {
flex: none;
width: 100%;
}
&.is-offset-12-desktop {
margin-left: 100%;
}
}
}
@media screen and (min-width: 1280px) {
.column {
&.is-narrow-widescreen {
flex: none;
}
&.is-full-widescreen {
flex: none;
width: 100%;
}
&.is-three-quarters-widescreen {
flex: none;
width: 75%;
}
&.is-two-thirds-widescreen {
flex: none;
width: 66.6666%;
}
&.is-half-widescreen {
flex: none;
width: 50%;
}
&.is-one-third-widescreen {
flex: none;
width: 33.3333%;
}
&.is-one-quarter-widescreen {
flex: none;
width: 25%;
}
&.is-one-fifth-widescreen {
flex: none;
width: 20%;
}
&.is-two-fifths-widescreen {
flex: none;
width: 40%;
}
&.is-three-fifths-widescreen {
flex: none;
width: 60%;
}
&.is-four-fifths-widescreen {
flex: none;
width: 80%;
}
&.is-offset-three-quarters-widescreen {
margin-left: 75%;
}
&.is-offset-two-thirds-widescreen {
margin-left: 66.6666%;
}
&.is-offset-half-widescreen {
margin-left: 50%;
}
&.is-offset-one-third-widescreen {
margin-left: 33.3333%;
}
&.is-offset-one-quarter-widescreen {
margin-left: 25%;
}
&.is-offset-one-fifth-widescreen {
margin-left: 20%;
}
&.is-offset-two-fifths-widescreen {
margin-left: 40%;
}
&.is-offset-three-fifths-widescreen {
margin-left: 60%;
}
&.is-offset-four-fifths-widescreen {
margin-left: 80%;
}
&.is-1-widescreen {
flex: none;
width: 8.33333%;
}
&.is-offset-1-widescreen {
margin-left: 8.33333%;
}
&.is-2-widescreen {
flex: none;
width: 16.66667%;
}
&.is-offset-2-widescreen {
margin-left: 16.66667%;
}
&.is-3-widescreen {
flex: none;
width: 25%;
}
&.is-offset-3-widescreen {
margin-left: 25%;
}
&.is-4-widescreen {
flex: none;
width: 33.33333%;
}
&.is-offset-4-widescreen {
margin-left: 33.33333%;
}
&.is-5-widescreen {
flex: none;
width: 41.66667%;
}
&.is-offset-5-widescreen {
margin-left: 41.66667%;
}
&.is-6-widescreen {
flex: none;
width: 50%;
}
&.is-offset-6-widescreen {
margin-left: 50%;
}
&.is-7-widescreen {
flex: none;
width: 58.33333%;
}
&.is-offset-7-widescreen {
margin-left: 58.33333%;
}
&.is-8-widescreen {
flex: none;
width: 66.66667%;
}
&.is-offset-8-widescreen {
margin-left: 66.66667%;
}
&.is-9-widescreen {
flex: none;
width: 75%;
}
&.is-offset-9-widescreen {
margin-left: 75%;
}
&.is-10-widescreen {
flex: none;
width: 83.33333%;
}
&.is-offset-10-widescreen {
margin-left: 83.33333%;
}
&.is-11-widescreen {
flex: none;
width: 91.66667%;
}
&.is-offset-11-widescreen {
margin-left: 91.66667%;
}
&.is-12-widescreen {
flex: none;
width: 100%;
}
&.is-offset-12-widescreen {
margin-left: 100%;
}
}
}
@media screen and (min-width: 1472px) {
.column {
&.is-narrow-fullhd {
flex: none;
}
&.is-full-fullhd {
flex: none;
width: 100%;
}
&.is-three-quarters-fullhd {
flex: none;
width: 75%;
}
&.is-two-thirds-fullhd {
flex: none;
width: 66.6666%;
}
&.is-half-fullhd {
flex: none;
width: 50%;
}
&.is-one-third-fullhd {
flex: none;
width: 33.3333%;
}
&.is-one-quarter-fullhd {
flex: none;
width: 25%;
}
&.is-one-fifth-fullhd {
flex: none;
width: 20%;
}
&.is-two-fifths-fullhd {
flex: none;
width: 40%;
}
&.is-three-fifths-fullhd {
flex: none;
width: 60%;
}
&.is-four-fifths-fullhd {
flex: none;
width: 80%;
}
&.is-offset-three-quarters-fullhd {
margin-left: 75%;
}
&.is-offset-two-thirds-fullhd {
margin-left: 66.6666%;
}
&.is-offset-half-fullhd {
margin-left: 50%;
}
&.is-offset-one-third-fullhd {
margin-left: 33.3333%;
}
&.is-offset-one-quarter-fullhd {
margin-left: 25%;
}
&.is-offset-one-fifth-fullhd {
margin-left: 20%;
}
&.is-offset-two-fifths-fullhd {
margin-left: 40%;
}
&.is-offset-three-fifths-fullhd {
margin-left: 60%;
}
&.is-offset-four-fifths-fullhd {
margin-left: 80%;
}
&.is-1-fullhd {
flex: none;
width: 8.33333%;
}
&.is-offset-1-fullhd {
margin-left: 8.33333%;
}
&.is-2-fullhd {
flex: none;
width: 16.66667%;
}
&.is-offset-2-fullhd {
margin-left: 16.66667%;
}
&.is-3-fullhd {
flex: none;
width: 25%;
}
&.is-offset-3-fullhd {
margin-left: 25%;
}
&.is-4-fullhd {
flex: none;
width: 33.33333%;
}
&.is-offset-4-fullhd {
margin-left: 33.33333%;
}
&.is-5-fullhd {
flex: none;
width: 41.66667%;
}
&.is-offset-5-fullhd {
margin-left: 41.66667%;
}
&.is-6-fullhd {
flex: none;
width: 50%;
}
&.is-offset-6-fullhd {
margin-left: 50%;
}
&.is-7-fullhd {
flex: none;
width: 58.33333%;
}
&.is-offset-7-fullhd {
margin-left: 58.33333%;
}
&.is-8-fullhd {
flex: none;
width: 66.66667%;
}
&.is-offset-8-fullhd {
margin-left: 66.66667%;
}
&.is-9-fullhd {
flex: none;
width: 75%;
}
&.is-offset-9-fullhd {
margin-left: 75%;
}
&.is-10-fullhd {
flex: none;
width: 83.33333%;
}
&.is-offset-10-fullhd {
margin-left: 83.33333%;
}
&.is-11-fullhd {
flex: none;
width: 91.66667%;
}
&.is-offset-11-fullhd {
margin-left: 91.66667%;
}
&.is-12-fullhd {
flex: none;
width: 100%;
}
&.is-offset-12-fullhd {
margin-left: 100%;
}
}
}
@media screen and (min-width: 769px), print {
.columns:not(.is-desktop) {
display: flex;
}
}
@media screen and (min-width: 1088px) {
.columns.is-desktop {
display: flex;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-0-mobile {
--columnGap: 0rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-0-tablet {
--columnGap: 0rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-0-tablet-only {
--columnGap: 0rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-0-touch {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-0-desktop {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-0-desktop-only {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-0-widescreen {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-0-widescreen-only {
--columnGap: 0rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-0-fullhd {
--columnGap: 0rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-1-mobile {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-1-tablet {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-1-tablet-only {
--columnGap: 0.25rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-1-touch {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-1-desktop {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-1-desktop-only {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-1-widescreen {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-1-widescreen-only {
--columnGap: 0.25rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-1-fullhd {
--columnGap: 0.25rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-2-mobile {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-2-tablet {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-2-tablet-only {
--columnGap: 0.5rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-2-touch {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-2-desktop {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-2-desktop-only {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-2-widescreen {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-2-widescreen-only {
--columnGap: 0.5rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-2-fullhd {
--columnGap: 0.5rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-3-mobile {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-3-tablet {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-3-tablet-only {
--columnGap: 0.75rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-3-touch {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-3-desktop {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-3-desktop-only {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-3-widescreen {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-3-widescreen-only {
--columnGap: 0.75rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-3-fullhd {
--columnGap: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-4-mobile {
--columnGap: 1rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-4-tablet {
--columnGap: 1rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-4-tablet-only {
--columnGap: 1rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-4-touch {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-4-desktop {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-4-desktop-only {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-4-widescreen {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-4-widescreen-only {
--columnGap: 1rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-4-fullhd {
--columnGap: 1rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-5-mobile {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-5-tablet {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-5-tablet-only {
--columnGap: 1.25rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-5-touch {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-5-desktop {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-5-desktop-only {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-5-widescreen {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-5-widescreen-only {
--columnGap: 1.25rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-5-fullhd {
--columnGap: 1.25rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-6-mobile {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-6-tablet {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-6-tablet-only {
--columnGap: 1.5rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-6-touch {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-6-desktop {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-6-desktop-only {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-6-widescreen {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-6-widescreen-only {
--columnGap: 1.5rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-6-fullhd {
--columnGap: 1.5rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-7-mobile {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-7-tablet {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-7-tablet-only {
--columnGap: 1.75rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-7-touch {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-7-desktop {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-7-desktop-only {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-7-widescreen {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-7-widescreen-only {
--columnGap: 1.75rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-7-fullhd {
--columnGap: 1.75rem;
}
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-8-mobile {
--columnGap: 2rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-8-tablet {
--columnGap: 2rem;
}
}
@media screen and (min-width: 769px) and (max-width: 1087px) {
.columns.is-variable.is-8-tablet-only {
--columnGap: 2rem;
}
}
@media screen and (max-width: 1087px) {
.columns.is-variable.is-8-touch {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1088px) {
.columns.is-variable.is-8-desktop {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1088px) and (max-width: 1279px) {
.columns.is-variable.is-8-desktop-only {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1280px) {
.columns.is-variable.is-8-widescreen {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1280px) and (max-width: 1471px) {
.columns.is-variable.is-8-widescreen-only {
--columnGap: 2rem;
}
}
@media screen and (min-width: 1472px) {
.columns.is-variable.is-8-fullhd {
--columnGap: 2rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.