ru-assets/app/assets/styles/_grid.scss

.grid {
    &-dis {
        &-row {
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 40px;

            @media screen and (max-width: 1220px) {
                justify-content: space-around;
            }
            @media screen and (max-width: 1000px) {
                max-width: 470px;
                margin: auto;
            }

            & img {
                display: block;
            }
            &:last-child,
            & div:last-child {
                margin: 0;
            }
        }
        &-col {
            &-1 {
                width: 25%;
                max-width: 230px;
                margin: 0 10px 0 0;

                @media screen and (max-width: 1000px) {
                    width: 50%;
                    max-width: 230px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
            &-2 {
                width: 50%;
                max-width: 470px;
                margin: 0 10px 0 0;

                @media screen and (max-width: 1000px) {
                    width: 100%;
                    margin-right: 0;
                    max-width: none;
                }
            }
            &-3 {
                width: 75%;
                max-width: 710px;
                margin: 0 10px 0 0;

                @media screen and (max-width: 1220px) {
                    width: 80%;
                    max-width: calc(100% - 240px);
                }
                @media screen and (max-width: 1000px) {
                    width: 100%;
                    max-width: none;
                    margin: 0;
                }
            }
            &-4 {
                width: 100%;
                // max-width: 710px;
                margin: 0 10px 0 0;

                @media screen and (max-width: 1000px) {
                    width: 100%;
                    max-width: none;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
    &-disrb {
        &-row {
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 20px;

            @media screen and (max-width: 1220px) {
                margin-right: 10px;
                display: -webkit-flex;
                display: -ms-flex;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }

            & img {
                display: block;
            }
            &:last-child,
            & div:last-child {
                margin: 0;
            }
        }
        &-col {
            &-1 {
                width: 33.333333%;
                max-width: 230px;
                margin: 0 10px 0 0;
            }
            &-2 {
                width: 66.66666%;
                max-width: 470px;
                margin: 0 10px 0 0;
            }
            &-3 {
                width: 100%;
                max-width: 710px;
                margin: 0 10px 0 0;

                @media screen and (max-width: 1220px) {
                    width: 100%;
                    max-width: 100%;
                    margin: 0;
                }
            }
        }
    }
}