Your IP : 216.73.216.84
// Variables
// ========================================================================
$text-column-gutter: 30px !default;
$text-column-gutter-l: 40px !default;
/* ========================================================================
Component: Column
========================================================================== */
[class*='as-column-'] { column-gap: $text-column-gutter; }
/* Desktop and bigger */
@include media-breakpoint-up(lg, $grid-breakpoints) {
[class*='as-column-'] { column-gap: $text-column-gutter-l; }
}
/* Divider
========================================================================== */
/*
* 1. Double the column gap
*/
.as-column-divider {
column-rule: 1px solid var(--bs-border-color);
/* 1 */
column-gap: ($text-column-gutter * 2);
}
/* Desktop and bigger */
@include media-breakpoint-up(lg, $grid-breakpoints) {
.as-column-divider {
column-gap: ($text-column-gutter-l * 2);
}
}
/* Width modifiers
========================================================================== */
.as-column-1-2 { column-count: 2;}
.as-column-1-3 { column-count: 3; }
.as-column-1-4 { column-count: 4; }
.as-column-1-5 { column-count: 5; }
.as-column-1-6 { column-count: 6; }
@each $breakpoint, $container-max-width in $container-max-widths {
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
.as-column-#{$breakpoint}-1-2 { column-count: 2;}
.as-column-#{$breakpoint}-1-3 { column-count: 3; }
.as-column-#{$breakpoint}-1-4 { column-count: 4; }
.as-column-#{$breakpoint}-1-5 { column-count: 5; }
.as-column-#{$breakpoint}-1-6 { column-count: 6; }
}
}
/* Make element span across all columns
* Does not work in Firefox yet
========================================================================== */
.as-column-span { column-span: all; }