.fade-rect {
  --fL: 0;
  --fR: 200;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, black var(--fL), black calc(100% - var(--fR)), transparent 100%);
  mask-image: linear-gradient(
    to right, transparent 0, black var(--fL), black calc(100% - var(--fR)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.fade-rect-inner {
  --fT: 0;
  --fB: 0;
  -webkit-mask-image: linear-gradient(
    to bottom, transparent 0, black var(--fT), black calc(100% - var(--fB)), transparent 100%);
  mask-image: linear-gradient(
    to bottom, transparent 0, black var(--fT), black calc(100% - var(--fB)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.fade-rect-inner > img {
  display: block;
  width: 100%;
  height: auto;
}

.fade-rect > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Utilities */
.fadeL-0  { --fL: 0; }
.fadeL-4  { --fL: 4px; }
.fadeL-6  { --fL: 6px; }
.fadeL-8  { --fL: 8px; }
.fadeL-10 { --fL: 10px; }
.fadeL-12 { --fL: 12px; }
.fadeL-16 { --fL: 16px; }
.fadeL-20 { --fL: 20px; }

.fadeR-0  { --fR: 0; }
.fadeR-4  { --fR: 4px; }
.fadeR-6  { --fR: 6px; }
.fadeR-8  { --fR: 8px; }
.fadeR-10 { --fR: 10px; }
.fadeR-12 { --fR: 12px; }
.fadeR-16 { --fR: 16px; }
.fadeR-20 { --fR: 20px; }

.fadeT-0  { --fT: 0; }
.fadeT-4  { --fT: 4px; }
.fadeT-6  { --fT: 6px; }
.fadeT-8  { --fT: 8px; }
.fadeT-10 { --fT: 10px; }
.fadeT-12 { --fT: 12px; }
.fadeT-16 { --fT: 16px; }
.fadeT-20 { --fT: 20px; }

.fadeB-0  { --fB: 0; }
.fadeB-4  { --fB: 4px; }
.fadeB-6  { --fB: 6px; }
.fadeB-8  { --fB: 8px; }
.fadeB-10 { --fB: 10px; }
.fadeB-12 { --fB: 12px; }
.fadeB-16 { --fB: 16px; }
.fadeB-20 { --fB: 20px; }

/* Radius utilities */
.radius-0  { border-radius: 0; }
.radius-8  { border-radius: 8px; }
.radius-12 { border-radius: 12px; }
.radius-16 { border-radius: 16px; }
.radius-24 { border-radius: 24px; }
.radius-999 { border-radius: 999px; }