/* === Logical spacing (margin/padding) === */
.ms-1 { margin-inline-start: 0.25rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.ms-3 { margin-inline-start: 0.75rem; }
.ms-4 { margin-inline-start: 1rem; }
.me-1 { margin-inline-end: 0.25rem; }
.me-2 { margin-inline-end: 0.5rem; }
.me-3 { margin-inline-end: 0.75rem; }
.me-4 { margin-inline-end: 1rem; }

.ps-1 { padding-inline-start: 0.25rem; }
.ps-2 { padding-inline-start: 0.5rem; }
.ps-3 { padding-inline-start: 0.75rem; }
.ps-4 { padding-inline-start: 1rem; }
.pe-1 { padding-inline-end: 0.25rem; }
.pe-2 { padding-inline-end: 0.5rem; }
.pe-3 { padding-inline-end: 0.75rem; }
.pe-4 { padding-inline-end: 1rem; }

/* === Logical positioning === */
.start-0 { inset-inline-start: 0; }
.start-2 { inset-inline-start: 0.5rem; }
.start-4 { inset-inline-start: 1rem; }
.end-0 { inset-inline-end: 0; }
.end-2 { inset-inline-end: 0.5rem; }
.end-4 { inset-inline-end: 1rem; }

/* Both sides horizontally */
.inset-inline-0 { inset-inline: 0; }

/* === Logical text alignment === */
.text-start { text-align: start; }
.text-end { text-align: end; }

/* === Logical float (if you use float) === */
.float-start { float: inline-start; }
.float-end { float: inline-end; }