/* Widths */

.width-10   { width: 10%; }
.width-20   { width: 20%; }
.width-25   { width: 25%; }
.width-30   { width: 30%; }
.width-33   { width: 33.3333333333%; }
.width-40   { width: 40%; }
.width-50   { width: 50%; }
.width-60   { width: 60%; }
.width-66   { width: 66.6666666666%; }
.width-70   { width: 70%; }
.width-75   { width: 75%; }
.width-80   { width: 80%; }
.width-90   { width: 90%; }
.width-100  { width: 100%; }

.width-1    { width: var(--spacing-100); }
.width-2    { width: var(--spacing-200); }
.width-3    { width: var(--spacing-300); }
.width-4    { width: var(--spacing-400); }
.width-5    { width: var(--spacing-500); }
.width-6    { width: var(--spacing-600); }
.width-7    { width: var(--spacing-700); }
.width-8    { width: var(--spacing-800); }
.width-9    { width: var(--spacing-900); }

@media (--breakpoint-1) {
  .bp1-width-10   { width: 10%; }
  .bp1-width-20   { width: 20%; }
  .bp1-width-25   { width: 25%; }
  .bp1-width-30   { width: 30%; }
  .bp1-width-33   { width: 33.3333333333%; }
  .bp1-width-40   { width: 40%; }
  .bp1-width-50   { width: 50%; }
  .bp1-width-60   { width: 60%; }
  .bp1-width-66   { width: 66.6666666666%; }
  .bp1-width-70   { width: 70%; }
  .bp1-width-75   { width: 75%; }
  .bp1-width-80   { width: 80%; }
  .bp1-width-90   { width: 90%; }
  .bp1-width-100  { width: 100%; }

  .bp1-width-1  { width: var(--spacing-100); }
  .bp1-width-2  { width: var(--spacing-200); }
  .bp1-width-3  { width: var(--spacing-300); }
  .bp1-width-4  { width: var(--spacing-400); }
  .bp1-width-5  { width: var(--spacing-500); }
  .bp1-width-6  { width: var(--spacing-600); }
  .bp1-width-7  { width: var(--spacing-700); }
  .bp1-width-8  { width: var(--spacing-800); }
  .bp1-width-9  { width: var(--spacing-900); }
}

@media (--breakpoint-2) {
  .bp2-width-10   { width: 10%; }
  .bp2-width-20   { width: 20%; }
  .bp2-width-25   { width: 25%; }
  .bp2-width-30   { width: 30%; }
  .bp2-width-33   { width: 33.3333333333%; }
  .bp2-width-40   { width: 40%; }
  .bp2-width-50   { width: 50%; }
  .bp2-width-60   { width: 60%; }
  .bp2-width-66   { width: 66.6666666666%; }
  .bp2-width-70   { width: 70%; }
  .bp2-width-75   { width: 75%; }
  .bp2-width-80   { width: 80%; }
  .bp2-width-90   { width: 90%; }
  .bp2-width-100  { width: 100%; }

  .bp2-width-1  { width: var(--spacing-100); }
  .bp2-width-2  { width: var(--spacing-200); }
  .bp2-width-3  { width: var(--spacing-300); }
  .bp2-width-4  { width: var(--spacing-400); }
  .bp2-width-5  { width: var(--spacing-500); }
  .bp2-width-6  { width: var(--spacing-600); }
  .bp2-width-7  { width: var(--spacing-700); }
  .bp2-width-8  { width: var(--spacing-800); }
  .bp2-width-9  { width: var(--spacing-900); }
}

@media (--breakpoint-3) {
  .bp3-width-10   { width: 10%; }
  .bp3-width-20   { width: 20%; }
  .bp3-width-25   { width: 25%; }
  .bp3-width-30   { width: 30%; }
  .bp3-width-33   { width: 33.3333333333%; }
  .bp3-width-40   { width: 40%; }
  .bp3-width-50   { width: 50%; }
  .bp3-width-60   { width: 60%; }
  .bp3-width-66   { width: 66.6666666666%; }
  .bp3-width-70   { width: 70%; }
  .bp3-width-75   { width: 75%; }
  .bp3-width-80   { width: 80%; }
  .bp3-width-90   { width: 90%; }
  .bp3-width-100  { width: 100%; }

  .bp3-width-1  { width: var(--spacing-100); }
  .bp3-width-2  { width: var(--spacing-200); }
  .bp3-width-3  { width: var(--spacing-300); }
  .bp3-width-4  { width: var(--spacing-400); }
  .bp3-width-5  { width: var(--spacing-500); }
  .bp3-width-6  { width: var(--spacing-600); }
  .bp3-width-7  { width: var(--spacing-700); }
  .bp3-width-8  { width: var(--spacing-800); }
  .bp3-width-9  { width: var(--spacing-900); }
}

@media (--breakpoint-4) {
  .bp4-width-10   { width: 10%; }
  .bp4-width-20   { width: 20%; }
  .bp4-width-25   { width: 25%; }
  .bp4-width-30   { width: 30%; }
  .bp4-width-33   { width: 33.3333333333%; }
  .bp4-width-40   { width: 40%; }
  .bp4-width-50   { width: 50%; }
  .bp4-width-60   { width: 60%; }
  .bp4-width-66   { width: 66.6666666666%; }
  .bp4-width-70   { width: 70%; }
  .bp4-width-75   { width: 75%; }
  .bp4-width-80   { width: 80%; }
  .bp4-width-90   { width: 90%; }
  .bp4-width-100  { width: 100%; }

  .bp4-width-1  { width: var(--spacing-100); }
  .bp4-width-2  { width: var(--spacing-200); }
  .bp4-width-3  { width: var(--spacing-300); }
  .bp4-width-4  { width: var(--spacing-400); }
  .bp4-width-5  { width: var(--spacing-500); }
  .bp4-width-6  { width: var(--spacing-600); }
  .bp4-width-7  { width: var(--spacing-700); }
  .bp4-width-8  { width: var(--spacing-800); }
  .bp4-width-9  { width: var(--spacing-900); }
}