@mixin px2-grid__col(){
    margin: 0 0.5rem 0 0.5rem;
    box-sizing: border-box;
}
.px2-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0rem;
    margin: 0 -0.5rem 0 -0.5rem;
    box-sizing: border-box;
	container-type: inline-size;

    &__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-3of4 {
        @include px2-grid__col();
        width: calc( 75% - 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 );
    }
    &__col-5of6 {
        @include px2-grid__col();
        width: calc( 83.33% - 1rem );
    }

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

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

    @container (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,
        &__col-5of6 {
            width: calc( 50% - 1rem );
        }
    }

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


    // 大きい画面(PCサイズ)
    @container (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-3of4 {
            @include px2-grid__col();
            width: calc( 75% - 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 );
        }
        &__col-lg-5of6 {
            @include px2-grid__col();
            width: calc( 83.33% - 1rem );
        }
    }

    // 中サイズの画面(タブレットサイズ)
    @container (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-3of4 {
            @include px2-grid__col();
            width: calc( 75% - 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 );
        }
        &__col-md-5of6 {
            @include px2-grid__col();
            width: calc( 83.33% - 1rem );
        }
    }

    // 小さい画面(スマートフォンサイズ)
    @container (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-3of4 {
            @include px2-grid__col();
            width: calc( 75% - 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 );
        }
        &__col-sm-5of6 {
            @include px2-grid__col();
            width: calc( 83.33% - 1rem );
        }
    }
}