Images do not rescale with CSS

I have three .svg images that need to resize. For some reason they do not resize, except when the screen is exceptionally small.

html:

<div class='au-images'>
    <div class='computer'>
        <p data-sr style='max-width: 180px;'><img src='images/computericon.svg'></p>
    </div>

    <div class='tablet'>
        <p data-sr='wait 0.5s' style='max-width: 180px;'><img src='images/tableticon.svg'></p>
    </div>

    <div class='phone'>
        <p data-sr='wait 1s' style='max-width: 180px;'><img src='images/phoneicon.svg'></p>
    </div>

I am also using scroll-reveal, which explains the 'data-sr' tag.

My CSS:

.computer,.tablet, .phone {
max-width: 33%;
display: inline-block;
padding: 0em 2.5em;
}

.computer img, .tablet img, .phone img {
    max-width: 100%;
    height: auto;
}

Can someone explain to me why my images don't resize?