/* Display / Visability
========================================================================== */

.d_n {
  display: none;
}
.d_i {
  display: inline;
}
.d_b {
  display: block;
}
.d_ib {
  display: inline-block;
}
.d_f {
  display: flex;
}
.d_if {
  display: inline-flex;
}



/* Text
========================================================================== */

/*** General ***/

.tt_u {
  text-transform: uppercase;
}

/*** Font Familys ***/

.ff_major {
  font-family: var(--ff-major);
}
.ff_minor {
  font-family: var(--ff-minor);
}

/*** Font Styles ***/

.fs_i {
  font-style: italic;
}

/*** Weight ***/

.fw_600 {
  font-weight: 600;
}
.fw_700 {
  font-weight: 700;
}

/*** Font Sizes ***/
.fs_n {
  font-size: var(--fs-nano);
}
.fs_xs {
  font-size: var(--fs-x-small);
}
.fs_s {
  font-size: var(--fs-small);
}
.fs_g {
  font-size: var(--fs-general);
}
.fs_l {
  font-size: var(--fs-large);
}
.fs_xl {
  font-size: var(--fs-x-large);
}

/*** Others ***/

.ta_c {
  text-align: center;
}

/*** Text Max Width ***/

.t_mw--s {
  max-width: 600px;
}
.t_mw--g {
  max-width: 865px;
}


@media (min-width: 1280px) {
  .t_mw--s {
    max-width: 700px;
  }
}

@media (min-width: 1600px) {
  .t_mw--s {
    max-width: 800px;
  }
  .t_mw--g {
    max-width: 960px;
  }
}

@media (min-width: 2300px) {
  .t_mw--s {
    max-width: 1000px;
  }
  .t_mw--g {
    max-width: 1200px;
  }
}



/* Margins
========================================================================== */

/*** General ***/

.mi_a {
  margin-inline: auto;
}

/*** Section ***/

.mb_sec--g {
  margin-bottom: 3em;
}
.mb_sec--s {
  margin-bottom: 2.22em;
}
.mt_sec--s {
  margin-top: 2.22em;
}
.mb_sec--xs {
  margin-bottom: 11px;
}
.mb_sec--inner {
  margin-bottom: 2.22em;
}

@media (min-width: 1024px) {
  .mb_sec--g {
    margin-bottom: 3.25em;
  }
  .mb_sec--s {
    margin-bottom: 2.4em;
  }
  .mt_sec--s {
    margin-top: 2.4em;
  }
  .mb_sec--xs {
    margin-bottom: 8px;
  }
  .mb_sec--inner {
    margin-bottom: 2.5em;
  }
}

@media (min-width: 1280px) {
  .mb_sec--g {
    margin-bottom: 3.6em;
  }
  .mb_sec--s {
    margin-bottom: 2.6em;
  }
  .mt_sec--s {
    margin-top: 2.6em;
  }
}

@media (min-width: 1600px) {
  .mb_sec--g {
    margin-bottom: 4em;
  }
  .mb_sec--s {
    margin-bottom: 3.1em;
  }
  .mt_sec--s {
    margin-top: 3.1em;
  }
  .mb_sec--xs {
    margin-bottom: 10px;
  }
}

@media (min-width: 2300px) {
  .mb_sec--g {
    margin-bottom: 4.25em;
  }
  .mb_sec--s {
    margin-bottom: 3.25em;
  }
  .mt_sec--s {
    margin-top: 3.25em;
  }
  .mb_sec--xs {
    margin-bottom: 12px;
  }
}

/*** Text ***/

.mt_text--xm {
  margin-top: 0.5em;
}
.mt_text--m {
  margin-top: 0.75em;
}
.mt_text--xs {
  margin-top: 1em;
}
.mt_text--s {
  margin-top: 1.25em;
}
.mt_text--g {
  margin-top: 1.5em;
}
.mt_text--b {
  margin-top: 1.75em;
}
.mt_text--xb {
  margin-top: 2em;
}
.mt_text--h {
  margin-top: 2.25em;
}
.mt_text--xh {
  margin-top: 2.75em;
}

.mb_text--xm {
  margin-bottom: 0.5em;
}
.mb_text--m {
  margin-bottom: 0.75em;
}
.mb_text--xs {
  margin-bottom: 1em;
}
.mb_text--s {
  margin-bottom: 1.25em;
}
.mb_text--g {
  margin-bottom: 1.5em;
}
.mb_text--b {
  margin-bottom: 1.75em;
}
.mb_text--xb {
  margin-bottom: 2em;
}
.mb_text--h {
  margin-bottom: 2.25em;
}
.mb_text--xh {
  margin-bottom: 2.75em;
}



/* Paddings
========================================================================== */

/*** Box ***/

.p_box--xs {
  padding: 23px;
}

@media (min-width: 1280px) {
  .p_box--xs {
    padding: 23px 32px;
  }
}

@media (min-width: 1600px) {
  .p_box--xs {
    padding: 28px 38px;
  }
}

@media (min-width: 2300px) {
  .p_box--xs {
    padding: 32px 42px;
  }
}


/*** Card ***/

.p_card--xs {
  padding: 23px;
}
.p_card--s {
  padding: 28px 23px;
}
.p_card--g {
  padding: 28px 23px;
}
.p_card--xg {
  padding: 28px 23px;
}
.p_card--b {
  padding: 28px 23px;
}

@media (min-width: 1024px) {
  .p_card--b {
    padding: 80px 23px;
  }
}

@media (min-width: 1280px) {
  .p_card--s {
    padding: 36px 32px;
  }
  .p_card--g {
    padding: 36px 32px;
  }
  .p_card--xg {
    padding: 50px 32px;
  }
  .p_card--b {
    padding: 80px 32px;
  }
}

@media (min-width: 1600px) {
  .p_card--xs {
    padding: 28px 23px;
  }
  .p_card--s {
    padding: 38px 33px;
  }
  .p_card--g {
    padding: 44px 38px;
  }
  .p_card--xg {
    padding: 65px 38px;
  }
  .p_card--b {
    padding: 100px 38px;
  }
}

@media (min-width: 2300px) {
  .p_card--xs {
    padding: 32px 28px;
  }
  .p_card--s {
    padding: 40px 35px;
  }
  .p_card--g {
    padding: 50px 42px;
  }
  .p_card--xg {
    padding: 80px 42px;
  }
  .p_card--b {
    padding: 120px 42px;
  }
}



/* Colors
========================================================================== */

/*** Base Colors ***/

.c_white {
  color: var(--c-white);
}
.c_black {
  color: var(--c-black);
}
.c_emperor {
  color: var(--c-emperor);
}
.c_anzac {
  color: var(--c-anzac);
}
.c_pungs {
  color: var(--c-pungs);
}
.c_oil {
  color: var(--c-oil);
}
.c_janna {
  color: var(--c-janna);
}
.c_citrine {
  color: var(--c-citrine);
}
.c_bahama {
  color: var(--c-bahama);
}
.c_astro {
  color: var(--c-astro);
}
.c_boder {
  color: var(--c-boder);
}
.c_hawkes {
  color: var(--c-hawkes);
}

.bg_white {
  background-color: var(--c-white);
}
.bg_black {
  background-color: var(--c-black);
}
.bg_emperor {
  background-color: var(--c-emperor);
}
.bg_anzac {
  background-color: var(--c-anzac);
}
.bg_pungs {
  background-color: var(--c-pungs);
}
.bg_oil {
  background-color: var(--c-oil);
}
.bg_janna {
  background-color: var(--c-janna);
}
.bg_citrine {
  background-color: var(--c-citrine);
}
.bg_bahama {
  background-color: var(--c-bahama);
}
.bg_astro {
  background-color: var(--c-astro);
}
.bg_boder {
  background-color: var(--c-boder);
}
.bg_hawkes {
  background-color: var(--c-hawkes);
}