// Grids
//
// Markup:
// <div class="px2-grid">
//     <div class="px2-grid__col-1of2">
//         <p>Column 1</p>
//     </div>
//     <div class="px2-grid__col-1of2">
//         <p>Column 2</p>
//     </div>
// </div>
//
// Styleguide 10.0
@mixin px2-grid__col(){
    margin: 0 0.5rem 1em 0.5rem;
    box-sizing: border-box;
}
.px2-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 1em -0.5rem 0 -0.5rem;
        // 上下のマージンはその場に表示される文字の大きさが基準になるべきなので、 rem ではなく em を採用する。
    box-sizing: border-box;

    &__col-1of1{
        @include px2-grid__col();
        width: calc( 100% - 1rem );
    }
    &__col-1of2{
        @include px2-grid__col();
        width: calc( 50% - 1rem );
    }
    &__col-1of3{
        @include px2-grid__col();
        width: calc( 33.33% - 1rem );
    }
    &__col-2of3{
        @include px2-grid__col();
        width: calc( 66.66% - 1rem );
    }
    &__col-1of4{
        @include px2-grid__col();
        width: calc( 25% - 1rem );
    }
    &__col-1of5{
        @include px2-grid__col();
        width: calc( 20% - 1rem );
    }
    &__col-2of5{
        @include px2-grid__col();
        width: calc( 40% - 1rem );
    }
    &__col-3of5{
        @include px2-grid__col();
        width: calc( 60% - 1rem );
    }
    &__col-4of5{
        @include px2-grid__col();
        width: calc( 80% - 1rem );
    }
    &__col-1of6{
        @include px2-grid__col();
        width: calc( 16.66% - 1rem );
    }

    @media all and (max-width: 768px) {
        // "sm" on Bootstrap 4
        &__col-1of5,
        &__col-2of5,
        &__col-3of5,
        &__col-4of5,
        &__col-1of6{
            width: calc( 33.33% - 1rem );
        }
    }

    @media all and (max-width: 660px) {
        &__col-1of4,
        &__col-3of4,
        &__col-1of5,
        &__col-2of5,
        &__col-3of5,
        &__col-4of5,
        &__col-1of6{
            width: calc( 50% - 1rem );
        }
    }

    @media all and (max-width: 544px) {
        // "xs" on Bootstrap 4
        &__col-1of3,
        &__col-2of3,
        &__col-1of4,
        &__col-3of4,
        &__col-1of5,
        &__col-2of5,
        &__col-3of5,
        &__col-4of5,
        &__col-1of6{
            width: calc( 50% - 1rem );
        }
    }

    @media all and (max-width: 440px) {
        &__col-1of2,
        &__col-1of3,
        &__col-2of3,
        &__col-1of4,
        &__col-3of4,
        &__col-1of5,
        &__col-2of5,
        &__col-3of5,
        &__col-4of5,
        &__col-1of6{
            width: calc( 100% - 1rem );
        }
    }


    // 大きい画面(PCサイズ)
    @media all and (min-width: 993px) {
        &__col-lg-1of1{
            @include px2-grid__col();
            width: calc( 100% - 1rem );
        }
        &__col-lg-1of2{
            @include px2-grid__col();
            width: calc( 50% - 1rem );
        }
        &__col-lg-1of3{
            @include px2-grid__col();
            width: calc( 33.33% - 1rem );
        }
        &__col-lg-2of3{
            @include px2-grid__col();
            width: calc( 66.66% - 1rem );
        }
        &__col-lg-1of4{
            @include px2-grid__col();
            width: calc( 25% - 1rem );
        }
        &__col-lg-1of5{
            @include px2-grid__col();
            width: calc( 20% - 1rem );
        }
        &__col-lg-2of5{
            @include px2-grid__col();
            width: calc( 40% - 1rem );
        }
        &__col-lg-3of5{
            @include px2-grid__col();
            width: calc( 60% - 1rem );
        }
        &__col-lg-4of5{
            @include px2-grid__col();
            width: calc( 80% - 1rem );
        }
        &__col-lg-1of6{
            @include px2-grid__col();
            width: calc( 16.66% - 1rem );
        }
    }

    // 中サイズの画面(タブレットサイズ)
    @media all and (min-width: 769px) and (max-width: 992px) {
        &__col-md-1of1{
            @include px2-grid__col();
            width: calc( 100% - 1rem );
        }
        &__col-md-1of2{
            @include px2-grid__col();
            width: calc( 50% - 1rem );
        }
        &__col-md-1of3{
            @include px2-grid__col();
            width: calc( 33.33% - 1rem );
        }
        &__col-md-2of3{
            @include px2-grid__col();
            width: calc( 66.66% - 1rem );
        }
        &__col-md-1of4{
            @include px2-grid__col();
            width: calc( 25% - 1rem );
        }
        &__col-md-1of5{
            @include px2-grid__col();
            width: calc( 20% - 1rem );
        }
        &__col-md-2of5{
            @include px2-grid__col();
            width: calc( 40% - 1rem );
        }
        &__col-md-3of5{
            @include px2-grid__col();
            width: calc( 60% - 1rem );
        }
        &__col-md-4of5{
            @include px2-grid__col();
            width: calc( 80% - 1rem );
        }
        &__col-md-1of6{
            @include px2-grid__col();
            width: calc( 16.66% - 1rem );
        }
    }

    // 小さい画面(スマートフォンサイズ)
    @media all and (max-width: 768px) {
        &__col-sm-1of1{
            @include px2-grid__col();
            width: calc( 100% - 1rem );
        }
        &__col-sm-1of2{
            @include px2-grid__col();
            width: calc( 50% - 1rem );
        }
        &__col-sm-1of3{
            @include px2-grid__col();
            width: calc( 33.33% - 1rem );
        }
        &__col-sm-2of3{
            @include px2-grid__col();
            width: calc( 66.66% - 1rem );
        }
        &__col-sm-1of4{
            @include px2-grid__col();
            width: calc( 25% - 1rem );
        }
        &__col-sm-1of5{
            @include px2-grid__col();
            width: calc( 20% - 1rem );
        }
        &__col-sm-2of5{
            @include px2-grid__col();
            width: calc( 40% - 1rem );
        }
        &__col-sm-3of5{
            @include px2-grid__col();
            width: calc( 60% - 1rem );
        }
        &__col-sm-4of5{
            @include px2-grid__col();
            width: calc( 80% - 1rem );
        }
        &__col-sm-1of6{
            @include px2-grid__col();
            width: calc( 16.66% - 1rem );
        }
    }
}