.rishi-ad {
    &_col {
        padding-left: calc(var(--gap) / 2);
        padding-right: calc(var(--gap) / 2);
        padding-top: calc(var(--row-gap) / 2);
        padding-bottom: calc(var(--row-gap) / 2);
        max-width: 100%;
        flex: 0 0 100%;
        margin: 0 auto;

        @media(min-width: 576px) {
            max-width: var(--width-sm);
            flex: 0 0 var(--width-sm);
        }

        @media(min-width: 768px) {
            max-width: var(--width-md);
            flex: 0 0 var(--width-md);
        }

        @media(min-width: 992px) {
            max-width: var(--width);
            flex: 0 0 var(--width);
        }
    }

    &_row {
        --gap: var(--c-gap, 48px);
        --row-gap: var(--c-row-gap, 30px);
        --width: 100%;
        --width-md: 100%;
        --width-sm: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: calc(-1 * (var(--gap) / 2));
        margin-right: calc(-1 * (var(--gap) / 2));
        margin-top: calc(-1 * (var(--row-gap) / 2));
        margin-bottom: calc(-1 * (var(--row-gap) / 2));

        &-masonry {
            --columns: 2;
            --gap: 30px;
            --row-gap: 30px;
            columns: 1;
            gap: 0;
            margin-left: calc(-1 * (var(--gap) / 2));
            margin-right: calc(-1 * (var(--gap) / 2));
            margin-top: calc(-1 * (var(--row-gap) / 2));
            margin-bottom: calc(-1 * (var(--row-gap) / 2));

            @media(min-width: 576px) {
                columns: var(--columns-sm);
            }

            @media(min-width: 768px) {
                columns: var(--columns-md);
            }

            @media(min-width: 992px) {
                columns: var(--columns);
            }

            .rishi-ad {
                &_col {
                    max-width: 100%;
                    width: 100%;
                    display: inline-block;
                    transform: translateZ(-1px);
                }
            }
        }
    }
}