/* -------------------------------------------
    Grid
---------------------------------------------- */
.row {
    --alpha-col: 1;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 2 * var(--alpha-gap));
    margin: calc(-1 * var(--alpha-gap));

    >* {
        position: relative;
        width: calc(100% / var(--alpha-col));
        padding: var(--alpha-gap);
        flex: 0 0 auto;
    }
}

.gutter-xl {
    --alpha-gap: 25px;
}

.gutter-lg {
    --alpha-gap: 15px;
}

.gutter-md {
    --alpha-gap: 10px;
}

.gutter-sm {
    --alpha-gap: 5px;
}

.gutter-xs {
    --alpha-gap: 1px;
}

.gutter-no {
    --alpha-gap: 0px;
}

@include mq(sm, max) {
    .gutter-lg {
        --alpha-gap: 10px;
    }
}

@include cols-css();

@if use(order-first) {
    .order-first {
        order: -1;
    }
}

@if use(order-last) {
    .order-last {
        order: 9;
    }
}

@include mq(xs) {
    @include cols-css(xs);
}

@include mq(sm) {
    @include cols-css(sm);

    @if use(order-sm-auto) {
        .order-sm-auto {
            order: 0;
        }
    }

    @if use(order-sm-first) {
        .order-sm-first {
            order: -1;
        }
    }

    @if use(order-sm-last) {
        .order-sm-last {
            order: 9;
        }
    }
}

@include mq(md) {
    @include cols-css(md);

    @if use(order-md-auto) {
        .order-md-auto {
            order: 0;
        }
    }

    @if use(order-md-first) {
        .order-md-first {
            order: -1;
        }
    }

    @if use(order-md-last) {
        .order-md-last {
            order: 9;
        }
    }
}

@include mq(lg) {
    @include cols-css(lg);

    @if use(order-lg-auto) {
        .order-lg-auto {
            order: 0;
        }
    }

    @if use(order-lg-first) {
        .order-lg-first {
            order: -1;
        }
    }

    @if use(order-lg-last) {
        .order-lg-last {
            order: 9;
        }
    }
}

@include mq(xl) {
    @include cols-css(xl);
}

@include col-css();

@include mq(xs) {
    @include col-css(xs);
}

@include mq(sm) {
    @include col-css(sm);
}

@include mq(md) {
    @include col-css(md);
}

@include mq(lg) {
    @include col-css(lg);
}

@include mq(xl) {
    @include col-css(xl);
}

// @include mq(xxl) {
//     .col-xxl-10 {
//         flex: 0 0 83.3333%;
//         max-width: 83.3333%;
//     }
//     .col-xxl-2 {
//         flex: 0 0 16.6666%;
//         max-width: 16.6666%;
//     }
// }

@include mq(xxl) {
    .col-xxl-2 {
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }
}

.grid {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 2 * var(--alpha-gap));
    margin: calc(-1 * var(--alpha-gap));

    .grid-item {
        padding: var(--alpha-gap);
        transform: translate3d(0, 0, 0);
    }
}

.elementor-row.grid {
    display: flex;
}

.creative-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 25%);
    grid-auto-rows: 1fr;

    .banner,
    &.banner,
    .pt-gallery,
    .pt-gallery .post-media-carousel,
    .product-category,
    .product-category>a,
    figure,
    figure img,
    .banner-img img {
        height: 100%;
    }

    &.products {

        .banner,
        .banner-img {
            height: auto;
        }
    }

    img {
        object-fit: cover;
    }

    .grid-item>*,
    .grid-item>.post-wrap>* {
        height: 100%;
    }

    @include mq(lg, max) {
        grid-template-columns: repeat(auto-fill, 50%);
    }
}

.grid-float {
    display: block !important;

    .grid-item {
        float: $left;
    }

    &::after {
        content: "";
        display: block;
        clear: both;
    }
}

.grid-gallery {
    figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    figure.grid-item {
        margin-bottom: calc(2 * var(--alpha-gap));
    }
}