/* mobile.css - phones and small tablets only.
   Linked with media="(max-width: 1040px)", so on a normal desktop window this file is not
   applied at all and the desktop layout in style.css stays exactly as it is. */

/* the 87 KB desktop background image is not needed on small screens */
body { background-image: none; }

#outer-wrapper { width: auto; max-width: 100%; }
#content-wrapper { width: auto; }

/* header: image stays, text wraps */
#header { height: auto; min-height: 96px; background-size: cover; background-position: left center; }
#header h1 { width: auto; margin: 0; padding: 18px 14px; font-size: 21px; line-height: 1.25; }

/* the three columns stack: contacts, content, widgets */
#center { background: #ffffff; }
#sidebar { float: none; width: auto; margin: 0; background: #659828; padding: 6px 12px 12px 12px; }
.sidebar .widget { background: none; }
#main { float: none; width: auto; margin: 0; }
#columna-derecha { float: none; width: auto; margin: 0; padding: 10px 0; }
#footer2 { float: none !important; width: auto !important; text-align: center !important; }

/* visitor counter is a wide image; it still loads (and counts), it is just not shown here */
#Followers1, #HTML1, #BlogList1, #Attribution1 { display: none; }

.post { font-size: 15px; padding-left: 12px; padding-right: 12px; }
.post img { max-width: 100%; height: auto; }

/* kovano-zhelyazo pages: cards adapt to the screen width */
.product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.product-photo { height: auto; }
.post .product-photo img { height: auto; aspect-ratio: 4 / 5; }
.product h3 { font-size: 13px; }
.pager .pg { min-width: 34px; padding: 8px 10px; }