.g1-collection {
    clear: both;
    max-width: 1152px;
    margin: 0 auto;
}

.g1-collection-viewport {
    clear: both;
    margin-#{$left}: -10px;
    margin-#{$right}: -10px;
}


.g1-collection-items {
    counter-reset: g1-collection-item-counter;

    clear: both;
    list-style: none;
    font-size: 0;
}

.g1-collection-item {
    display: inline-block;
    @include box-sizing( border-box );

    width: 100%;
    margin: 0;
    padding: 0 10px;

    vertical-align: top;

    font-size: 1rem;
}


@if ( 'cards' == $stack ) {
    .g1-collection-item .g1-box {
        @include display(flex);
        @include flex-direction(column);
        @include justify-content(center);
        @include flex(1 1 auto);

        width: 100%;
    }

    .g1-collection-item .g1-advertisement {
        @include display(flex);
        @include flex-direction(column);
        @include justify-content(center);
        @include flex(1 1 auto);

        background: $skin_border_color;
    }
}







.g1-collection-item-1of3 {
    width: 100%;
}


@media only screen and ( min-width: $mobile_grid_width + 1px) {
    @if ( 'cards' == $stack ) {
        .g1-collection-items {
            @include display(flex);
            @include flex-wrap(wrap);
            @include align-items(stretch);

            margin-bottom: 0;
        }

        .g1-collection-item {
            @include display(flex);
            @include align-items(stretch);
        }
    }
}

@media only screen and ( min-width: $mobile_grid_width + 1px ) and ( max-width: 1024px ) {
    .g1-collection-item-1of3 {
        width: percentage(1/2);
    }
}

@media only screen and ( min-width: 1025px ) {
    .g1-collection-viewport {
        margin-#{$left}: -$grid_gutter_width/2;
        margin-#{$right}: -$grid_gutter_width/2;
    }

    .g1-collection-item {
        padding: 0 $grid_gutter_width/2;
    }

    .g1-collection-item {
        .g1-collection-columns-2 & {
            width: percentage(1/2);
        }

        .g1-collection-columns-3 & {
            width: percentage(1/3);
        }

        .g1-collection-columns-4 & {
            width: percentage(1/4);
        }
    }
}


@import "components.collections/more";







.g1-related-entries {
    margin: 3rem 0;
}

.g1-dont-miss {
    margin-top: 60px;
}


.g1-hot-content,
.g1-trending-content,
.g1-popular-content {
    margin-bottom: 3rem;
}