.o-grid {
    @screen sm {
        margin-right: -.5rem;
        margin-left: -.5rem;
        list-style: none;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;

        &.o-grid--tight {
            margin-right: -1px;
            margin-left: -1px;
        }
    }
}

.o-grid--centered {
    justify-content: center;
}

/*
 * The nowrap-Modifiers makes grid items span across a single row only
 * Excess items are can be revealed by horizontal scrolling/wiping
 *
 * @todo: Needs JS Enhancement to add clickable navigation arrows
 */
.o-grid--nowrap {
    overflow-x: scroll;
    flex-wrap: nowrap;

    .o-grid__item {
        flex-shrink: 0;
    }
}

.o-grid__item {
    margin-bottom: 1rem;
    width: 100%;

    @screen sm {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .o-grid--tight & {
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 2px;

        @screen sm {
            padding-right: -1px;
            padding-left: -1px;
        }
    }
}

.o-grid--halves {
    .o-grid__item {
        @screen sm {
            width: 50%;
        }
    }
}


.o-grid--thirds {
    .o-grid__item {
        @screen sm {
            width: 50%;
        }

        @screen lg {
            width: 33.33333%;
        }
    }
}


.o-grid--fourths {
    .o-grid__item {
        @screen sm {
            width: 50%;
        }

        @screen md {
            width: 25%;
        }
    }
}


/* When the *item* determines the width */
/* stylelint-disable selector-class-pattern */
.o-grid__item--1\/2 {
    @screen sm {
        width: 50%;
    }
}

.o-grid__item--1\/3 {
    @screen sm {
        width: 50%;
    }

    @screen lg {
        width: 33.33333%;
    }
}

.o-grid__item--2\/3 {
    @screen sm {
        width: 50%;
    }

    @screen lg {
        width: 66.66667%;
    }
}

.o-grid__item--1\/4 {
    @screen sm {
        width: 50%;
    }

    @screen lg {
        width: 25%;
    }
}

.o-grid__item--3\/4 {
    width: 100%;

    @screen lg {
        width: 75%;
    }
}
