.ruban {
    display: block;
    
    width: 100%;
    height: 100%;
    
    background: linear-gradient(0deg, var(--color) 0%, var(--color) 100%), var(--url);
    background-repeat: repeat-x;
    background-color: white;
    background-blend-mode: multiply, luminosity;
    background-size: auto 100%;
}

.ruban::after {
    content: '.';
    color: transparent;
}

.ruban.satin {
    --url: url("/assets/images/rubans/satin.grayscale.png");
}

.ruban.bleu-roi {
    --color: #4169e1;
}

.ruban.noir {
    --color: #333;
}

.ruban.violet {
    --color: #A629C2;
}