nth-child selector for a varying grid layout

I'm trying to solve a varying grid pattern using css nth-child (if possible without JS).

I'm trying to create this pattern to repeat down the page: repeating grid

At the moment the best I can achieve is for the first 3 to be 33% width and then everything from there 25%

.service {
    width: 33%;
    &:nth-child(n+4),
    &:nth-child(n+5),
    &:nth-child(n+6),
    &:nth-child(n+7), {
        width: 25%;
    }
}