.brushes {
    overflow: hidden
}

.brushes--pattern {
    width: 100%;
    height: 104px;
    position: relative
}

@media screen and (min-width: 768px) {
    .brushes--pattern {
        height: 250px
    }
}

.brushes--pattern .pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.brushes--pattern .brushe {
    transform: translateY(-100%)
}

.brushes--pattern .background-pattern {
    background: #00814F;
    -webkit-mask: url("../images/mobile-pattern.svg");
    mask: url("../images/mobile-pattern.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    margin-top: -2px
}

@media screen and (min-width: 768px) {
    .brushes--pattern .background-pattern {
        -webkit-mask: url("../images/pattern.svg");
        mask: url("../images/pattern.svg");
        -webkit-mask-repeat: repeat-x;
        mask-repeat: repeat-x;
        -webkit-mask-position: top;
        mask-position: top
    }
}

.brushes--pattern .green-light {
    -webkit-mask: url("../images/green-light.svg");
    mask: url("../images/green-light.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: #BCE602
}

.brushes--pattern .green-dark {
    -webkit-mask: url("../images/green-dark.svg");
    mask: url("../images/green-dark.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: #004B3F
}

.brushes--pattern .yellow {
    -webkit-mask: url("../images/yellow.svg");
    mask: url("../images/yellow.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: #FFC83B
}

.brushes--pattern .pink {
    -webkit-mask: url("../images/pink.svg");
    mask: url("../images/pink.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: url("../images/noise.jpeg"), #FF90BE;
    background-size: contain;
    background-repeat: repeat;
    background-blend-mode: multiply
}

.brushes--pattern .blue {
    -webkit-mask: url("../images/blue.svg");
    mask: url("../images/blue.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: #91B8FA
}

.brushes--pattern .red {
    -webkit-mask: url("../images/red.svg");
    mask: url("../images/red.svg");
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: url("../images/noise.jpeg"), #FF7021;
    background-size: contain;
    background-repeat: repeat;
    background-blend-mode: multiply
}