<div class="padding-lg grid gap-md">
 <div class="[email protected]">
  <div class="child shadow-xs"></div>
 </div>
 <div class="[email protected]">
  <div class="child shadow-sm"></div>
 </div>
 <div class="[email protected]">
  <div class="child shadow-md"></div>
 </div>
 <div class="[email protected]">
  <div class="child shadow-lg"></div>
 </div>
 <div class="[email protected]">
  <div class="child shadow-xl"></div>
 </div>
</div>

// box-shadow - 🐞 https://codyhouse.co/ds/get-started

.child {
  height: 0;
  padding-bottom: 100%;
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
}

body {
 background-color: var(--color-bg-dark);
}