body {
   font-family: Arial, sans-serif;
   padding: 20px;
   background-color: #1e293b;
   color: white;
}

.variant {
   display: none;
}

.xs {
   display: block;
}

@media (min-width: 576px) {
   body { background-color: #3b6d3d; }
   .variant { display: none; }
   .sm { display: block; }
}

@media (min-width: 768px) {
   body { background-color: #754467; }
   .variant { display: none; }
   .md { display: block; }
}

@media (min-width: 992px) {
   body { background-color: #64748b; }
   .variant { display: none; }
   .lg { display: block; }
}

@media (min-width: 1200px) {
   body { background-color: #94a3b8; }
   .variant { display: none; }
   .xl { display: block; }
}

@media print {
   body {
       background: white;
       color: black;
   }
}