Polymer iron-list grid not resizing in neon-animated-pages - polymer

Question

I have <iron-list> with grid mode encapsulated by <neon-animated-pages> and somehow neon-pages ruin its ability to adapt to screen size and rearrange items. I tried changing position of neon pages to relative and so on. Nothing helped. Thanks in advance.
Here is the code
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/games/:subject"
data="{{router}}"
tail="{{subroute}}">
</app-route>
<neon-animated-pages selected="0" id="pages">
<games-subjects-module item="{{item}}"></games-subjects-module>
<games-subject-module item="{{item}}"></games-subject-module>
</neon-animated-pages>
And here is <games-subjects-module> where i have my iron-list
<template>
<style is="custom-style">
paper-card{
width: 200px;
height: 300px;
margin: 20px;
--paper-card-header-image:{
height: 250px;
}
}
</style>
<iron-list id="list" items="{{subjects}}" as="subject" selection-enabled selected-item="{{item}}" grid>
<template>
<div>
<a href="/games/{{subject.val.name}}">
<paper-card elevation="1">
<div class="card-content">
{{subject.val.name}}
</div>
</paper-card>
</a>
</div>
</template>
</iron-list>
</template>