How to control size of logo in mobile and tablet?

I have no idea how to control the size of my logo. I am using T3-blanc template.

At the moment something works with by adjusting this .logo-img-sm class: but is not how it should work (I think).

@media (max-width : 480px) 

{

.logo-img-sm{

Width:               225px;

Height:              100%;

}

}

I would like to use another picture for my logo in mobile and maybe tablet.

I know the 'standard' way by selecting a small and big picture below Theme Tab.

But I was expecting I can change settings in variable.less file. But nothing seemed to work.

Also I think I want to use media queries.