.mediaPad {
  --pa: 0 0 0 0px;
  --pa-sm: 0 0 0 0px;
  --pa-md: 0 0 0 0px;
  --pa-lg: 0 0 0 0px;
  --pa-xl: 0 0 0 0px;
  --pa-xxl: 0 0 0 0px;
  padding: var(--pa);
}

.mediaMar {
  --ma: 0 0 0 0px;
  --ma-sm: 0 0 0 0px;
  --ma-md: 0 0 0 0px;
  --ma-lg: 0 0 0 0px;
  --ma-xl: 0 0 0 0px;
  --ma-xxl: 0 0 0 0px;
  margin: var(--ma);
}

.mediaPadTop {
  --pt: 4px;
  --pt-sm: 6px;
  --pt-md: 7px;
  --pt-lg: 10px;
  --pt-xl: 12px;
  --pt-xxl: 16px;
  padding-top: var(--pt);
}

.mediaPadBott {
  --pb: 4px;
  --pb-sm: 6px;
  --pb-md: 7px;
  --pb-lg: 10px;
  --pb-xl: 12px;
  --pb-xxl: 16px;
  padding-bottom: var(--pb);
}

.mediaMarTop {
  --mt: 4px;
  --mt-sm: 6px;
  --mt-md: 7px;
  --mt-lg: 10px;
  --mt-xl: 12px;
  --mt-xxl: 16px;
  margin-top: var(--mt);
}

.mediaMarBott {
  --mb: 4px;
  --mb-sm: 6px;
  --mb-md: 7px;
  --mb-lg: 10px;
  --mb-xl: 12px;
  --mb-xxl: 16px;
  margin-bottom: var(--mb);
}

.mediaWidth {
  --wd: 4px;
  --wd-sm: 6px;
  --wd-md: 7px;
  --wd-lg: 10px;
  --wd-xl: 12px;
  --wd-xxl: 16px;
  width: var(--wd);
}

.mediaHeight {
  --he: 4px;
  --he-sm: 6px;
  --he-md: 7px;
  --he-lg: 10px;
  --he-xl: 12px;
  --he-xxl: 16px;
  height: var(--he);
}

@media (min-width: 576px) and (max-width: 767px) {
  .mediaPad {
    padding: var(--pa-sm);
  }

  .mediaMar {
    margin: var(--ma-sm);
  }

  .mediaPadTop {
    padding-top: var(--pt-sm);
  }

  .mediaPadBott {
    padding-bottom: var(--pb-sm);
  }

  .mediaMarTop {
    margin-top: var(--mt-sm);
  }

  .mediaMarBott {
    margin-bottom: var(--mb-sm);
  }

  .mediaWidth {
    width: var(--wd-sm);
  }

  .mediaHeight {
    height: var(--he-sm);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mediaPad {
    padding: var(--pa-md);
  }

  .mediaMar {
    margin: var(--ma-md);
  }

  .mediaPadTop {
    padding-top: var(--pt-md);
  }

  .mediaPadBott {
    padding-bottom: var(--pb-md);
  }

  .mediaMarTop {
    margin-top: var(--mt-md);
  }

  .mediaMarBott {
    margin-bottom: var(--mb-md);
  }

  .mediaWidth {
    width: var(--wd-md);
  }

  .mediaHeight {
    height: var(--he-md);
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .mediaPad {
    padding: var(--pa-lg);
  }

  .mediaMar {
    margin: var(--ma-lg);
  }

  .mediaPadTop {
    padding-top: var(--pt-lg);
  }

  .mediaPadBott {
    padding-bottom: var(--pb-lg);
  }

  .mediaMarTop {
    margin-top: var(--mt-lg);
  }

  .mediaMarBott {
    margin-bottom: var(--mb-lg);
  }

  .mediaWidth {
    width: var(--wd-lg);
  }

  .mediaHeight {
    height: var(--he-lg);
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .mediaPad {
    padding: var(--pa-xl);
  }

  .mediaMar {
    margin: var(--ma-xl);
  }

  .mediaPadTop {
    padding-top: var(--pt-xl);
  }

  .mediaPadBott {
    padding-bottom: var(--pb-xl);
  }

  .mediaMarTop {
    margin-top: var(--mt-xl);
  }

  .mediaMarBott {
    margin-bottom: var(--mb-xl);
  }

  .mediaWidth {
    width: var(--wd-xl);
  }

  .mediaHeight {
    height: var(--he-xl);
  }
}
@media (min-width: 1400px) {
  .mediaPad {
    padding: var(--pa-xxl);
  }

  .mediaMar {
    margin: var(--ma-xxl);
  }

  .mediaPadTop {
    padding-top: var(--pt-xxl);
  }

  .mediaPadBott {
    padding-bottom: var(--pb-xxl);
  }

  .mediaMarTop {
    margin-top: var(--mt-xxl);
  }

  .mediaMarBott {
    margin-bottom: var(--mb-xxl);
  }

  .mediaWidth {
    width: var(--wd-xxl);
  }

  .mediaHeight {
    height: var(--he-xxl);
  }
}