.o-grid {
    list-style: none;
    padding: 0;

    @include mappy-bp(xs) {
        @apply .-mx-2; // keep @apply here for now, using negative margins with tailwinds config() function is not working well
        display: flex;
        flex-wrap: wrap;

        &.o-grid--tight {
            @apply .-mx-px; // keep @apply here for now, using negative margins with tailwinds config() function is not working well
        }
    }
}

/*
 * 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: theme('margin.4');
    padding-left: theme('padding.2');
    padding-right: theme('padding.2');
    width: 100%;

    .o-grid--tight & {
        padding-left: theme('padding.px');
        padding-right: theme('padding.px');
        margin-bottom: theme('margin.2px');
    }

    @include mappy-bp(max xs) {
        padding-left: 0;
        padding-right: 0;
    }
}


.o-grid--halves {
    .o-grid__item {
        @include mappy-bp(xs) {
            width: 50%;
        }
    }
}


.o-grid--thirds {
    .o-grid__item {
        @include mappy-bp(sm) {
            width: 50%;
        }

        @include mappy-bp(lg) {
            width: 33.33%;
        }
    }
}


.o-grid--fourths {
    .o-grid__item {
        @include mappy-bp(xs) {
            width: 50%;
        }

        @include mappy-bp(sm) {
            width: 33.33%;
        }

        @include mappy-bp(md) {
            width: 25%;
        }
    }
}


/* When the *item* determines the width */
/* stylelint-disable selector-class-pattern */
.o-grid__item--1\/2 {
    @include mappy-bp(xs) {
        width: 50%;
    }
}

.o-grid__item--1\/3 {
    @include mappy-bp(xs) {
        width: 50%;
    }

    @include mappy-bp(lg) {
        width: 33.33%;
    }
}

.o-grid__item--2\/3 {
    @include mappy-bp(lg) {
        width: 66.66%;
    }
}

.o-grid__item--1\/4 {
    @include mappy-bp(md) {
        width: 25%;
    }
}

.o-grid__item--3\/4 {
    @include mappy-bp(md) {
        width: 75%;
    }
}
