.thumbs-controls {
  display: flex;
  gap: 10px;
  align-self: flex-end;
}

.thumbs-controls input {
  display: none;
}

.thumbs-controls label {
  width: 40px;
}

@media only screen and (min-device-width: 1024px) and (orientation: portrait){
.thumbs-controls {
  gap: 18px;
}
.thumbs-controls label {
  width: 60px;
}}

.thumbs-controls input:checked + label {
  background: #783106;
}

body:has(#size-xsm:checked) .thumbs-item {  width: 80px;}
body:has(#size-sm:checked) .thumbs-item { width: 100px;}
body:has(#size-med:checked) .thumbs-item { width: 130px;}
body:has(#size-lar:checked) .thumbs-item { width: 160px;}
body:has(#size-xlar:checked) .thumbs-item { width: 220px;}

@media only screen and (min-device-width: 768px){
body:has(#size-xsm:checked) .thumbs-item { width: 60px;}
body:has(#size-sm:checked) .thumbs-item { width: 100px;}
body:has(#size-med:checked) .thumbs-item { width: 130px;}
body:has(#size-lar:checked) .thumbs-item { width: 170px;}
body:has(#size-xlar:checked) .thumbs-item { width: 210px;}
}

@media only screen and (min-device-width: 768px) and (orientation: portrait){

}

@media only screen and (min-device-width: 1024px) and (orientation: portrait){
body:has(#size-xsm:checked) .thumbs-item { width: 140px;}
body:has(#size-sm:checked) .thumbs-item { width: 200px;}
body:has(#size-med:checked) .thumbs-item { width: 260px;}
body:has(#size-lar:checked) .thumbs-item { width: 330px;}
body:has(#size-xlar:checked) .thumbs-item { width: 400px;}
}

@media only screen and (min-device-width: 1200px){ 
body:has(#size-xsm:checked) .thumbs-item { width: 70px;}
body:has(#size-sm:checked) .thumbs-item { width: 90px;}
body:has(#size-med:checked) .thumbs-item { width: 110px;}
body:has(#size-lar:checked) .thumbs-item { width: 160px;}
body:has(#size-xlar:checked) .thumbs-item { width: 200px;}
}