.u-transition { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }  .u-transition-transform { transition: transform 0.3s ease; }  .u-transition-shadow { transition: box-shadow 0.3s ease; }  .u-transition-fast { transition-duration: 0.15s; } .u-transition-slow { transition-duration: 0.45s; }   .u-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); } .u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .u-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }  @media (max-width: 767px) { .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; } } @media (max-width: 991px) { .u-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .u-grid-3 { grid-template-columns: 1fr; } }  .u-gap-xs { gap: var(--space-xs); } .u-gap-s { gap: var(--space--s); } .u-gap-m { gap: var(--space--m); } .u-gap-l { gap: var(--space--l); }