body[data-view="columns"] main
{
    > .container > .content ~ .content
    {
        margin-top: steps(4);
    }

    .content.optimized
    {
        @include optimal-measure;
    }

    .contents
    {
        @include column-container;

        margin-top: steps(3);
        margin-bottom: steps(3);

        p
        {
            background: $color-dummy-see-through;
        }

        > .content
        {
            &:nth-child(n)
            {
                background: $color-dummy-17;
            }

            &:nth-child(2n)
            {
                background: $color-dummy-18;
            }
        }
    }

    .contents.thirds
    {
        > .content
        {
            &.one-third
            {
                @include one-third-column;
            }

            &.two-thirds
            {
                @include two-thirds-column;
            }
        }
    }

    .contents.quarters
    {
        > .content.one-quarter
        {
            @include one-quarter-column;
        }
    }

    .contents.extended
    {
        @include extended;
    }
}
