/* Central responsive stylesheet */
:root{
  --container-max-desktop:1200px;
  --container-max-tablet:720px;
  --gutter:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif}
.container{max-width:var(--container-max-desktop);margin:0 auto;padding:0 var(--gutter)}
.cards-container{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.card{background:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.08)}
img{max-width:100%;height:auto}
/* Forms */
.login-container{width:100%;max-width:420px;margin:0 auto}
.form-group label{display:block;margin-bottom:8px}
/* Utility classes */
.hide-mobile{display:none}
/* Responsive breakpoints */
@media (max-width:575px){
  .container{max-width:100%;padding:0 12px}
  .cards-container{grid-template-columns:1fr}
  .login-container{max-width:95%;padding:18px}
  .hide-mobile{display:none}
}
@media (min-width:576px) and (max-width:991px){
  .container{max-width:var(--container-max-tablet)}
  .cards-container{grid-template-columns:repeat(2,1fr)}
  .login-container{max-width:420px}
  .hide-mobile{display:inline}
}
@media (min-width:992px){
  .container{max-width:var(--container-max-desktop)}
  .cards-container{grid-template-columns:repeat(3,1fr)}
  .hide-mobile{display:inline}
}
/* Print tweaks */
@media print{.hide-print{display:none}}