CSS Rem Function Basic

<!DOCTYPE html>
<title>My Example</title>

.rem-box {
    background-color: #198754;
    color: white;
    font-weight: bold;
    height: 40px;
    width: 200px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    
    /* 
      1. Find the remainder of the index (--i) divided by 2.
         Because we use rem(), negative indices will yield negative remainders!
      2. Multiply that remainder by 50px to shift the box.
    */
    --shift: rem(var(--i), 2);
    transform: translateX(calc(var(--shift) * 50px));
  }
  
  .rem-box:last-child {
    margin-bottom: 0;
  }

/* Assign a sequence of negative and positive indices */
  .box-neg2 { --i: -2; background-color: #20c997; }
  .box-neg1 { --i: -1; background-color: #0dcaf0; }
  .box-zero { --i: 0;  background-color: #0d6efd; }
  .box-pos1 { --i: 1;  background-color: #6f42c1; }
  .box-pos2 { --i: 2;  background-color: #d63384; }
</style>

<div class="rem-container">
  <div class="rem-box box-neg2">Index -2 (rem: 0)</div>
  <div class="rem-box box-neg1">Index -1 (rem: -1)</div>
  <div class="rem-box box-zero">Index 0 (rem: 0)</div>
  <div class="rem-box box-pos1">Index 1 (rem: 1)</div>
  <div class="rem-box box-pos2">Index 2 (rem: 0)</div>
</div>