less and less

Flip RTL automatically

/* ❌ Physical properties need overrides */
.card {
  padding-left: 2rem;
  margin-right: 1rem;
  border-left: 4px solid;
}

[dir="rtl"] .card {
  padding-left: 0;
  padding-right: 2rem;
  margin-right: 0;
  margin-left: 1rem;
  border-left: none;
  border-right: 4px solid;
}

/* ✅ Logical properties adapt automatically */
.card {
  padding-inline-start: 2rem;
  margin-inline-end: 1rem;
  border-inline-start: 4px solid;
}