.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; } } } } }