/***************/
/*** COLUMNS ***/
/***************/

.paragraph.columns > .columns--wrapper {
    display: flex;
    flex-wrap: wrap;

    /*margin-left: calc(-1 * var(--grid-gap) / 2);*/
    /*margin-right: calc(-1 * var(--grid-gap) / 2);*/
    gap: var(--grid-gap);
}


/* PADDING / field_inside_distance */
.paragraph.columns.padding-none {
    padding: 0 var(--content-padding);
}

.paragraph.columns.padding-narrow {
    padding: var(--spacing-40) var(--content-padding);
}

.paragraph.columns.padding-big {
    padding: var(--spacing-100) var(--content-padding);
}


/* MARGIN / field_outer_distance */
.paragraph.columns.margin-none {
    margin-top: 0;
    margin-bottom: 0;
}

.paragraph.columns.margin-narrow {
    margin-top: var(--spacing-40);
    margin-bottom: var(--spacing-40);
}

.paragraph.columns.margin-big {
    margin-top: var(--spacing-100);
    margin-bottom: var(--spacing-100);
}

.field__item.columns:has(.margin-none) {
    margin-bottom: 0;
}


/* BACKGROUND COLOR / field_bg_color */
.paragraph.columns.bg-color-blue {
    background-color: var(--color-blue);
}

.paragraph.columns.bg-color-red {
    background-color: var(--color-red);
}

.paragraph.columns.bg-color-grey {
    background-color: var(--color-grey-light);
}

.paragraph.columns.bg-color-blue-pattern::after,
.paragraph.columns.bg-color-red-pattern::after,
.paragraph.columns.bg-color-grey-pattern::after {
    display: block;
    content: '';
    background-image: url(../../images/bg-pattern.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .3;
    top: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: luminosity;
}

.paragraph.columns.bg-color-blue-pattern::before,
.paragraph.columns.bg-color-red-pattern::before,
.paragraph.columns.bg-color-grey-pattern::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.paragraph.columns.bg-color-blue-pattern::before {
    background-image: var(--color-blue-gradient);
}

.paragraph.columns.bg-color-red-pattern::before {
    background-color: var(--color-red-gradient);
}

.paragraph.columns.bg-color-grey-pattern::before {
    background-color: var(--color-grey-light);
}


/* COLUMNS AS SLIDER / field_mobile_slider */
@media (max-width: 767px) {
    .paragraph.columns .columns--wrapper.is-slider {
        display: flex;
        flex-wrap: nowrap;

        overflow-x: scroll;
        overscroll-behavior-x: contain;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;

        padding-bottom: 2rem;
    }

    .paragraph.columns .columns--wrapper.is-slider > .paragraph.column {
        flex: 0 0 90%;
    }
}


/* COLUMNS AS SLIDER / field_mobile_slider */
.paragraph.columns .columns--wrapper.is-couple-view > .paragraph.column {
    flex: 0 0 calc((100% - 6vw) / 2)
}

@media (min-width: 767px) {
    .paragraph.columns .columns--wrapper.is-couple-view > .paragraph.column {
        flex: 1;
    }
}


/*********************/
/*** INNER COLUMNS ***/
/*********************/
.paragraph.column {
    margin-top: calc(var(--grid-gap) / 2);
    margin-bottom: calc(var(--grid-gap) / 2);
}

.paragraph.column:first-of-type {
    margin-top: 0;
}

.paragraph.column:last-of-type {
    margin-bottom: 0;
}

.paragraph.column .column-content > .paragraph:not(:first-of-type) {
    margin-top: 1.5em;
}

@media (min-width: 767px) {
    .paragraph.column {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.paragraph.column > .column-content {
    display: flex;
    flex-direction: column;

    /*margin-left: calc(var(--grid-gap) / 2);*/
    /*margin-right: calc(var(--grid-gap) / 2);*/
}


/* COLUMNS WIDTH / field_column_width */

@media (min-width: 767px) {

    .paragraph.column.col-size-default { flex: 1 1 0;}

    .paragraph.column.col-size-20 {
        flex: 0 0 calc(20% - var(--grid-gap));
    }

    .paragraph.column.col-size-25 {
        flex: 0 0 calc(25% - var(--grid-gap));
    }

    .paragraph.column.col-size-33 {
        flex: 0 0 calc(33% - var(--grid-gap));
    }

    .paragraph.column.col-size-50 {
        flex: 0 0 calc(50% - var(--grid-gap));
    }

    .paragraph.column.col-size-75      { flex: 0 0 calc(75% - var(--grid-gap));}
    .paragraph.column.col-size-80      { flex: 0 0 calc(80% - var(--grid-gap)); }
}


/* COLUMNS ALIGNMENT / field_center_options */
.paragraph.column.col-alignment-center {
    text-align: center;
}

.paragraph.column.col-alignment-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* SINGLE CENTERED COLUMN */
.paragraph.columns.columns--1 .paragraph.column.col-alignment-center {
    padding: 0 var(--content-padding);
}


/* COLUMNS HEADLINE */
.paragraph.columns.bg-color-default > .paragraph.paragraph--type--title.headline-style-dash {
    padding-bottom: calc(var(--spacing-100) - 3rem);
}