Is it possible to combine media queries for same CSS rules?

Question

I currently have this chunk of codes.

@media screen and (min-width: 768px) and (max-width: 990px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

@media screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

What I'm trying to do is something like..

@media screen and (min-width: 768px) and (max-width: 990px),
@media screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

so I don't have to write the same properties and values again since they are same. Any ideas?
I also searched for "setting more than 2 breakpoints inside a media query" but there's no luck.

Answer 1

You don't have to add @media again in the second line. This should work:

@media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}