.oc-size-fit {
    width: fit-content;
}

.oc-size-col1   { width: 8.33333333%; }
.oc-size-xxs    { width: 16.66666667%; }
.oc-size-xs     { width: 25%; }
.oc-size-small  { width: 33.33333333%; }
.oc-size-col5   { width: 41.66666667%; }
.oc-size-medium { width: 50%; }
.oc-size-col7   { width: 58.33333333%; }
.oc-size-large  { width: 66.66666667%; }
.oc-size-xl     { width: 75%; }
.oc-size-xxl    { width: 83.33333333%; }
.oc-size-full   { width: 100%; }

.oc-form-group {
    .oc-size-col1,
    .oc-size-xxs,
    .oc-size-xs,
    .oc-size-small,
    .oc-size-col5,
    .oc-size-medium,
    .oc-size-col7,
    .oc-size-large,
    .oc-size-xl,
    .oc-size-xxl,
    .oc-size-full {
        width: unset;
    }

    .oc-size-col1   { grid-column: span  1 / span  1; }
    .oc-size-xxs    { grid-column: span  2 / span  2; }
    .oc-size-xs     { grid-column: span  3 / span  3; }
    .oc-size-small  { grid-column: span  4 / span  4; }
    .oc-size-col5   { grid-column: span  5 / span  5; }
    .oc-size-medium { grid-column: span  6 / span  6; }
    .oc-size-col7   { grid-column: span  7 / span  7; }
    .oc-size-large  { grid-column: span  8 / span  8; }
    .oc-size-xl     { grid-column: span  9 / span  9; }
    .oc-size-xxl    { grid-column: span 10 / span 10; }
    .oc-size-col11  { grid-column: span 11 / span 11; }
    .oc-size-full   { grid-column: span 12 / span 12; }
}