/* Keep the preview's CSS viewport equal to its labelled width. */
.shiko-banner-preview iframe{box-sizing:content-box}
/* A deliberate second row leaves every carousel control easy to tap. */
@media(max-width:420px){
 .shiko-banner-controls{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;gap:4px;padding:4px}
 .shiko-banner-controls>button:first-child{grid-column:1;grid-row:1}
 .shiko-banner-counter{grid-column:2;grid-row:1}
 .shiko-banner-controls>.shiko-banner-pause{grid-column:3;grid-row:1}
 .shiko-banner-controls>button:last-child{grid-column:4;grid-row:1}
 .shiko-banner-controls>.shiko-banner-dots{grid-column:1/-1;grid-row:2;justify-content:center;min-width:0}
 .shiko-banner-dots button{min-width:44px;min-height:44px}
}