Wie kann ich diesen Code responsive machen?

[Enrico]

Hallo,

ich habe im Internet ein einfahes Bewertungs-"Skript" gefunden, das aber leider fixe Maße hat:

.bewertung
{
   background:      url("data:image/svg+xml;...);
   background-size: contain;
   display:         inline-block;
   font-size:       0;
   height:          50px;
   overflow:        hidden;
   position:        relative;
   white-space:     nowrap;
   width:           250px
}

.bewertung i
{
   background:      url("data:image/svg+xml;...);
   background-size: contain;
   height:          100%;
   left:            0;
   opacity:         0;
   position:        absolute;
   top:             0;
   width:           20%;
   z-index:         1
}

.bewertung input
{
   display:            inline-block;
   height:             100%;
   margin:             0;
   opacity:            0;
   padding:            0;
   position:           relative;
   width:              20%;
   z-index:            2;
   -moz-appearance:    none;
   -webkit-appearance: none
}

.bewertung input:hover {cursor:pointer}

.bewertung input:hover+i,
.bewertung input:checked+i
{opacity:1}

.bewertung i~i       {width:40%}
.bewertung i~i~i     {width:60%}
.bewertung i~i~i~i   {width:80%}
.bewertung i~i~i~i~i {width:100%}

Was muss ich wie ändern, damit ich es responsive hin bekomme?

Vielen Dank für eure Hilfe und Gruß, Enrico