@mixin page-container
{
    @include for-at-least-normal-tablets
    {
        margin-left: $gutter;
        margin-right: $gutter;
    }

    @include for-normal-desktops
    {
        max-width: $max-page-content-width;
        margin-left: auto;
        margin-right: auto;
    }
}

@mixin column-container($column-item: ".content")
{
    @include for-at-least-normal-tablets
    {
        display: flex;
        flex-wrap: wrap;

        > #{$column-item}
        {
            flex: 1 1;

            // force minimal width so veeeeerylongtexts do not break the layout
            min-width: 0;
        }
    }
}

@mixin column($size, $columns)
{
    // `flex-basis` doesn't account for `box-sizing: border-box` in ie10-11
    // https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

    flex: none;
    width: percentage($size / $columns);
}

@mixin full-column
{
    @include column(1, 1);
}

@mixin half-column
{
    @include for-at-least-normal-tablets
    {
        @include column(1, 2);
    }
}

@mixin one-third-column
{
    @include for-at-least-normal-tablets
    {
        @include full-column;
    }

    @include for-desktops
    {
        @include column(1, 3);
    }
}

@mixin two-thirds-column
{
    @include for-at-least-normal-tablets
    {
        @include full-column;
    }

    @include for-desktops
    {
        @include column(2, 3);
    }
}

@mixin one-quarter-column
{
    @include for-at-least-normal-tablets
    {
        @include half-column;
    }

    @include for-desktops
    {
        @include column(1, 4);
    }
}

@mixin one-fifth-column
{
    @include for-at-least-normal-tablets
    {
        @include half-column;
    }

    @include for-desktops
    {
        @include column(1, 5);
    }
}

@mixin three-quarters-column
{
    @include for-at-least-normal-tablets
    {
        @include column(3, 4);
    }
}


@mixin optimal-measure
{
    max-width: steps(70); // 7 columns
}
