:root {
  --icc-spacing-1: 0.25rem;
  --icc-spacing-2: 0.5rem;
  --icc-spacing-3: 0.75rem;
  --icc-spacing-4: 1rem;
  --icc-spacing-5: 1.25rem;
  --icc-spacing-6: 1.5rem;
  --icc-spacing-7: 2rem;
  --icc-spacing-8: 3rem;
  --icc-spacing-9: 4rem;
}

/*! Margin lock */
.icc-mb-0,
.icc-mbs-0 {
  margin-block-start: 0 !important;
}
.icc-mb-0,
.icc-mbe-0 {
  margin-block-end: 0 !important;
}

.icc-mb-1,
.icc-mbs-1 {
  margin-block-start: var(--icc-spacing-1);
}
.icc-mb-1,
.icc-mbe-1 {
  margin-block-end: var(--icc-spacing-1);
}

.icc-mb-2,
.icc-mbs-2 {
  margin-block-start: var(--icc-spacing-2);
}
.icc-mb-2,
.icc-mbe-2 {
  margin-block-end: var(--icc-spacing-2);
}
.icc-mb-3,
.icc-mbs-3 {
  margin-block-start: var(--icc-spacing-3);
}
.icc-mb-3,
.icc-mbe-3 {
  margin-block-end: var(--icc-spacing-3);
}

.icc-mb-4,
.icc-mbs-4 {
  margin-block-start: var(--icc-spacing-4);
}
.icc-mb-4,
.icc-mbe-4 {
  margin-block-end: var(--icc-spacing-4);
}

.icc-mb-6,
.icc-mbs-6 {
  margin-block-start: var(--icc-spacing-6) !important;
}
.icc-mb-6,
.icc-mbe-6 {
  margin-block-end: var(--icc-spacing-6) !important;
}

.icc-mb-7,
.icc-mbs-7 {
  margin-block-start: var(--icc-spacing-7) !important;
}
.icc-mb-7,
.icc-mbe-7 {
  margin-block-end: var(--icc-spacing-7) !important;
}
.icc-mb-8,
.icc-mbs-8 {
  margin-block-start: var(--icc-spacing-8) !important;
}
.icc-mb-8,
.icc-mbe-8 {
  margin-block-end: var(--icc-spacing-8) !important;
}

@media screen and (width > 900px) {
  .icc-D-mb-0,
  .icc-D-mbs-0 {
    margin-block-start: 0 !important;
  }
  .icc-D-mb-0,
  .icc-D-mbe-0 {
    margin-block-end: 0 !important;
  }

  .icc-D-mb-2,
  .icc-D-mbs-2 {
    margin-block-start: var(--icc-spacing-2);
  }
  .icc-D-mb-2,
  .icc-D-mbe-2 {
    margin-block-end: var(--icc-spacing-2);
  }

  .icc-D-mb-3,
  .icc-D-mbs-3 {
    margin-block-start: var(--icc-spacing-3);
  }
  .icc-D-mb-3,
  .icc-D-mbe-3 {
    margin-block-end: var(--icc-spacing-3);
  }
  .icc-D-mb-4,
  .icc-D-mbs-4 {
    margin-block-start: var(--icc-spacing-4) !important;
  }
  .icc-D-mb-4,
  .icc-D-mbe-4 {
    margin-block-end: var(--icc-spacing-4) !important;
  }

  .icc-D-mb-6,
  .icc-D-mbs-6 {
    margin-block-start: var(--icc-spacing-6);
  }
  .icc-D-mb-6,
  .icc-D-mbe-6 {
    margin-block-end: var(--icc-spacing-6);
  }
  .icc-D-mb-7,
  .icc-D-mbs-7 {
    margin-block-start: var(--icc-spacing-7) !important;
  }
  .icc-D-mb-7,
  .icc-D-mbe-7 {
    margin-block-end: var(--icc-spacing-7) !important;
  }

  .icc-D-mb-8,
  .icc-D-mbs-8 {
    margin-block-start: var(--icc-spacing-8) !important;
  }
  .icc-D-mb-8,
  .icc-D-mbe-8 {
    margin-block-end: var(--icc-spacing-8) !important;
  }

  .icc-D-mb-9,
  .icc-D-mbs-9 {
    margin-block-start: var(--icc-spacing-9) !important;
  }
  .icc-D-mb-9,
  .icc-D-mbe-9 {
    margin-block-end: var(--icc-spacing-9) !important;
  }
}

/*! Margin inline */
.icc-mi-0,
.icc-mis-0 {
  margin-inline-start: 0 !important;
}
.icc-mi-0,
.icc-mie-0 {
  margin-inline-end: 0 !important;
}

.icc-mi-1,
.icc-mis-1 {
  margin-inline-start: var(--icc-spacing-1) !important;
}
.icc-mi-1,
.icc-mie-1 {
  margin-inline-end: var(--icc-spacing-1) !important;
}

.icc-mi-2,
.icc-mis-2 {
  margin-inline-start: var(--icc-spacing-2) !important;
}
.icc-mi-2,
.icc-mie-2 {
  margin-inline-end: var(--icc-spacing-2) !important;
}
.icc-mi-4,
.icc-mis-4 {
  margin-inline-start: var(--icc-spacing-4) !important;
}
.icc-mi-4,
.icc-mie-4 {
  margin-inline-end: var(--icc-spacing-4) !important;
}

@media screen and (width > 900px) {
  .icc-D-mi-4,
  .icc-D-mis-4 {
    margin-inline-start: var(--icc-spacing-4) !important;
  }
  .icc-D-mi-4,
  .icc-D-mie-4 {
    margin-inline-end: var(--icc-spacing-4) !important;
  }

  .icc-D-mi-9,
  .icc-D-mis-9 {
    margin-inline-start: var(--icc-spacing-9) !important;
  }
  .icc-D-mi-9,
  .icc-D-mie-9 {
    margin-inline-end: var(--icc-spacing-9) !important;
  }
  .icc-D-mi-auto,
  .icc-D-mis-auto {
    margin-inline-start: auto;
  }
  .icc-D-mi-auto,
  .icc-D-mie-auto {
    margin-inline-end: auto;
  }
}

/*! Padding block */
.icc-pb-0,
.icc-pbs-0 {
  padding-block-start: 0 !important;
}
.icc-pb-0,
.icc-pbe-0 {
  padding-block-end: 0 !important;
}

.icc-pb-1,
.icc-pbs-1 {
  padding-block-start: var(--icc-spacing-1);
}
.icc-pb-1,
.icc-pbe-1 {
  padding-block-end: var(--icc-spacing-1);
}

.icc-pb-2,
.icc-pbs-2 {
  padding-block-start: var(--icc-spacing-2);
}
.icc-pb-2,
.icc-pbe-2 {
  padding-block-end: var(--icc-spacing-2);
}

.icc-pb-3,
.icc-pbs-3 {
  padding-block-start: var(--icc-spacing-3);
}
.icc-pb-3,
.icc-pbe-3 {
  padding-block-end: var(--icc-spacing-3);
}

.icc-pb-4,
.icc-pbs-4 {
  padding-block-start: var(--icc-spacing-4) !important;
}
.icc-pb-4,
.icc-pbe-4 {
  padding-block-end: var(--icc-spacing-4) !important;
}
.icc-pb-5,
.icc-pbs-5 {
  padding-block-start: var(--icc-spacing-5);
}
.icc-pb-5,
.icc-pbe-5 {
  padding-block-end: var(--icc-spacing-5);
}

.icc-pb-6,
.icc-pbs-6 {
  padding-block-start: var(--icc-spacing-6);
}
.icc-pb-6,
.icc-pbe-6 {
  padding-block-end: var(--icc-spacing-6);
}

.icc-pb-7,
.icc-pbs-7 {
  padding-block-start: var(--icc-spacing-7);
}
.icc-pb-7,
.icc-pbe-7 {
  padding-block-end: var(--icc-spacing-7);
}

.icc-pb-8,
.icc-pbs-8 {
  padding-block-start: var(--icc-spacing-8);
}
.icc-pb-8,
.icc-pbe-8 {
  padding-block-end: var(--icc-spacing-8);
}

.icc-pb-9,
.icc-pbs-9 {
  padding-block-start: var(--icc-spacing-9) !important;
}
.icc-pb-9,
.icc-pbe-9 {
  padding-block-end: var(--icc-spacing-9) !important;
}

@media screen and (width > 900px) {
  .icc-D-pb-4,
  .icc-D-pbs-4 {
    padding-block-start: var(--icc-spacing-4);
  }
  .icc-D-pb-4,
  .icc-D-pbe-4 {
    padding-block-end: var(--icc-spacing-4);
  }

  .icc-D-pb-6,
  .icc-D-pbs-6 {
    padding-block-start: var(--icc-spacing-6);
  }
  .icc-D-pb-6,
  .icc-D-pbe-6 {
    padding-block-end: var(--icc-spacing-6);
  }
  .icc-D-pb-7,
  .icc-D-pbs-7 {
    padding-block-start: var(--icc-spacing-7);
  }
  .icc-D-pb-7,
  .icc-D-pbe-7 {
    padding-block-end: var(--icc-spacing-7);
  }

  .icc-D-pb-8,
  .icc-D-pbs-8 {
    padding-block-start: var(--icc-spacing-8) !important;
  }
  .icc-D-pb-8,
  .icc-D-pbe-8 {
    padding-block-end: var(--icc-spacing-8) !important;
  }

  .icc-D-pb-9,
  .icc-D-pbs-9 {
    padding-block-start: var(--icc-spacing-9);
  }
  .icc-D-pb-9,
  .icc-D-pbe-9 {
    padding-block-end: var(--icc-spacing-9);
  }
}

/*! Padding inline */
.icc-pi-0,
.icc-pis-0 {
  padding-inline-start: 0 !important;
}
.icc-pi-0,
.icc-pie-0 {
  padding-inline-end: 0 !important;
}
.icc-pi-1,
.icc-pis-1 {
  padding-inline-start: var(--icc-spacing-1) !important;
}
.icc-pi-1,
.icc-pie-1 {
  padding-inline-end: var(--icc-spacing-1) !important;
}

.icc-pi-2,
.icc-pis-2 {
  padding-inline-start: var(--icc-spacing-2) !important;
}
.icc-pi-2,
.icc-pie-2 {
  padding-inline-end: var(--icc-spacing-2) !important;
}

.icc-pi-3,
.icc-pis-3 {
  padding-inline-start: var(--icc-spacing-3) !important;
}
.icc-pi-3,
.icc-pie-3 {
  padding-inline-end: var(--icc-spacing-3) !important;
}

.icc-pi-4,
.icc-pis-4 {
  padding-inline-start: var(--icc-spacing-4) !important;
}
.icc-pi-4,
.icc-pie-4 {
  padding-inline-end: var(--icc-spacing-4) !important;
}
.icc-pi-5,
.icc-pis-5 {
  padding-inline-start: var(--icc-spacing-5);
}
.icc-pi-5,
.icc-pie-5 {
  padding-inline-end: var(--icc-spacing-5);
}
.icc-pi-6,
.icc-pis-6 {
  padding-inline-start: var(--icc-spacing-6);
}
.icc-pi-6,
.icc-pie-6 {
  padding-inline-end: var(--icc-spacing-6);
}

.icc-pi-7,
.icc-pis-7 {
  padding-inline-start: var(--icc-spacing-7);
}
.icc-pi-7,
.icc-pie-7 {
  padding-inline-end: var(--icc-spacing-7);
}
@media screen and (width > 650px) {
  .icc-T-pi-3,
  .icc-T-pis-3 {
    padding-inline-start: var(--icc-spacing-3) !important;
  }
  .icc-T-pi-3,
  .icc-T-pie-3 {
    padding-inline-end: var(--icc-spacing-3) !important;
  }
}
@media screen and (width > 900px) {
  .icc-D-pi-4,
  .icc-D-pis-4 {
    padding-inline-start: var(--icc-spacing-4);
  }
  .icc-D-pi-4,
  .icc-D-pie-4 {
    padding-inline-end: var(--icc-spacing-4);
  }
  .icc-D-pi-6,
  .icc-D-pis-6 {
    padding-inline-start: var(--icc-spacing-6) !important;
  }
  .icc-D-pi-6,
  .icc-D-pie-6 {
    padding-inline-end: var(--icc-spacing-6) !important;
  }
  .icc-D-pi-7,
  .icc-D-pis-7 {
    padding-inline-start: var(--icc-spacing-7) !important;
  }
  .icc-D-pi-7,
  .icc-D-pie-7 {
    padding-inline-end: var(--icc-spacing-7) !important;
  }

  .icc-D-pi-8,
  .icc-D-pis-8 {
    padding-inline-start: var(--icc-spacing-8);
  }
  .icc-D-pi-8,
  .icc-D-pie-8 {
    padding-inline-end: var(--icc-spacing-8);
  }

  .icc-D-pi-9,
  .icc-D-pis-9 {
    padding-inline-start: var(--icc-spacing-9);
  }
  .icc-D-pi-9,
  .icc-D-pie-9 {
    padding-inline-end: var(--icc-spacing-9);
  }
}

/*! GAP */
.icc-gap-2 {
  gap: var(--icc-spacing-2);
}
.icc-gap-3 {
  gap: var(--icc-spacing-3);
}
.icc-gap-4 {
  gap: var(--icc-spacing-4);
}
.icc-gap-6 {
  gap: var(--icc-spacing-6);
}
@media screen and (width > 900px) {
  .icc-D-gap-4 {
    gap: var(--icc-spacing-4);
  }
}

/*! Border radius */
.icc-border-radius-1 {
  border-radius: var(--icc-spacing-1);
}
.icc-border-radius-2 {
  border-radius: var(--icc-spacing-2);
}
.icc-border-radius-3 {
  border-radius: var(--icc-spacing-3);
}
.icc-border-radius-pill {
  border-radius: 9999px;
}
@media screen and (width > 900px) {
  .icc-D-border-radius-2 {
    border-radius: var(--icc-spacing-2);
  }
  .icc-D-border-radius-3 {
    border-radius: var(--icc-spacing-3);
  }
}