/* ==========================================================================
   Utility Classes — converted from bricks/bricks-classes.json
   ========================================================================== */

/* --------------------------------------------------------------------------
   Aligns
   -------------------------------------------------------------------------- */

.align--center { text-align: center; }
.align--justify { text-align: justify; }

.align--justify-center { text-align: justify; }
@media (max-width: 991px) { .align--justify-center { text-align: center; } }

.align--left { text-align: left; }

.align--left-center { text-align: left; }
@media (max-width: 991px) { .align--left-center { text-align: center; } }

.align--right { text-align: right; }

/* --------------------------------------------------------------------------
   Colors — background
   -------------------------------------------------------------------------- */

.bg--bg { background-color: var(--color-bg); align-items: center; justify-content: center; }
.bg--black { background-color: var(--color-black); }
.bg--border { background-color: var(--color-border); }
.bg--primary { background-color: var(--color-primary); }
.bg--secondary { background-color: var(--color-secondary); }
.bg--shadow { background-color: var(--color-shadow); }
.bg--text { background-color: var(--color-text); }
.bg--third { background-color: var(--color-third); }
.bg--trans { background-color: var(--color-trans); }
.bg--white { background-color: var(--color-white); }

/* --------------------------------------------------------------------------
   Colors — text color
   -------------------------------------------------------------------------- */

.color--accent { color: var(--color-accent); }
.color--bg { color: var(--color-bg); }
.color--black { color: var(--color-black); }
.color--border { color: var(--color-border); }
.color--primary { color: var(--color-primary); }
.color--secondary { color: var(--color-secondary); }
.color--shadow { color: var(--color-shadow); }
.color--text { color: var(--color-text); }
.color--third { color: var(--color-third); }
.color--trans { color: var(--color-trans); }
.color--white { color: var(--color-white); }

/* --------------------------------------------------------------------------
   Colors — fill
   -------------------------------------------------------------------------- */

.fill--primary { fill: var(--color-primary); }
.fill--secondary { fill: var(--color-secondary); }
.fill--third { fill: var(--color-third); }
.fill--border { fill: var(--color-border); }
.fill--bg { fill: var(--color-bg); }
.fill--black { fill: var(--color-black); }
.fill--white { fill: var(--color-white); }
.fill--text { fill: var(--color-text); }
.fill--shadow { fill: var(--color-shadow); }
.fill--trans { fill: var(--color-trans); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

/* card--alt: no settings defined (marker class) */

.card--default {
  background-color: var(--color-white);
  padding: var(--space-l);
  box-shadow: 0 var(--space-3xs) var(--space-xs) var(--color-shadow);
  border-radius: var(--space-s);
}

/* --------------------------------------------------------------------------
   Texts — font size
   -------------------------------------------------------------------------- */

.text--xl { font-size: var(--text-xl); }
.text--l { font-size: var(--text-l); }
.text--m { font-size: var(--text-m); }
.text--s { font-size: var(--text-s); }
.text--xs { font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Texts — decoration & style
   -------------------------------------------------------------------------- */

.deco--italic { font-style: italic; }
.deco--lowercase { text-transform: lowercase; }

.deco--strikethrough {
  text-transform: capitalize;
  text-decoration: line-through;
}

.deco--underline { text-decoration: underline; }
.deco--uppercase { text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Texts — font family (marker classes)
   -------------------------------------------------------------------------- */

/* font--primary: no settings defined (marker class) */
/* font--secondary: no settings defined (marker class) */

/* --------------------------------------------------------------------------
   Texts — font weight
   -------------------------------------------------------------------------- */

.weight--black { font-weight: 900; }
.weight--bold { font-weight: 700; }

/* --------------------------------------------------------------------------
   Displays
   -------------------------------------------------------------------------- */

.display--0-0-0 { display: block; }
@media (max-width: 991px) { .display--0-0-0 { display: none; } }

.display--0-1-1 { display: none; }
@media (max-width: 991px) { .display--0-1-1 { display: block; } }

.display--1-0-0 { display: block; }
@media (max-width: 991px) { .display--1-0-0 { display: none; } }

.display--1-1-0 { display: block; }
@media (max-width: 767px) { .display--1-1-0 { display: none; } }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form--checkbox input[type=checkbox] {
  accent-color: var(--color-primary);
}

.form--file .choose-files {
  width: 100%;
  border-color: var(--color-border);
}

.form--radio input[type=radio] {
  accent-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Gaps
   -------------------------------------------------------------------------- */

.gap--4xl { gap: var(--space-4xl); }
.gap--3xl { gap: var(--space-3xl); }

.gap--2xl { gap: var(--space-2xl); }

.gap--xl { gap: var(--space-xl); }
@media (max-width: 991px) { .gap--xl { gap: var(--space-l); } }
@media (max-width: 767px) { .gap--xl { gap: var(--space-m); } }

.gap--l { gap: var(--space-l); }
@media (max-width: 991px) { .gap--l { gap: var(--space-m); } }

.gap--m { gap: var(--space-m); }
.gap--s { gap: var(--space-s); }
.gap--xs { gap: var(--space-xs); }
.gap--2xs { gap: var(--space-2xs); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.grid--1 { display: grid; grid-template-columns: 1fr; }

.grid--1-2 { display: grid; grid-template-columns: 1fr 2fr; }
@media (max-width: 767px) { .grid--1-2 { grid-template-columns: 1fr; } }

.grid--1-3 { display: grid; grid-template-columns: 1fr 3fr; }
@media (max-width: 767px) { .grid--1-3 { grid-template-columns: 1fr; } }

.grid--2 { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 478px) { .grid--2 { grid-template-columns: 1fr; } }

.grid--2-1 { display: grid; grid-template-columns: 2fr 1fr; }
@media (max-width: 767px) { .grid--2-1 { grid-template-columns: 1fr; } }

.grid--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 767px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px) { .grid--3 { grid-template-columns: 1fr; } }

.grid--3-1 { display: grid; grid-template-columns: 3fr 1fr; }
@media (max-width: 767px) { .grid--3-1 { grid-template-columns: 1fr; } }

.grid--4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 767px) { .grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px) { .grid--4 { grid-template-columns: 1fr; } }

.grid--5 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 767px) { .grid--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px) { .grid--5 { grid-template-columns: 1fr; } }

.grid--6 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 767px) { .grid--6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px) { .grid--6 { grid-template-columns: 1fr; } }

.grid--7 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 767px) { .grid--7 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px) { .grid--7 { grid-template-columns: 1fr; } }

.grid--8 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 767px) { .grid--8 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 478px) { .grid--8 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

.h--1 { font-size: var(--h1); }
.h--2 { font-size: var(--h2); }
.h--3 { font-size: var(--h3); }
.h--4 { font-size: var(--h4); }
.h--5 { font-size: var(--h5); }
.h--6 { font-size: var(--h6); }

/* --------------------------------------------------------------------------
   Margins
   -------------------------------------------------------------------------- */

.mb--4xl { margin-bottom: var(--space-4xl); }
.mb--3xl { margin-bottom: var(--space-3xl); }
.mb--2xl { margin-bottom: var(--space-2xl); }
.mb--xl { margin-bottom: var(--space-xl); }
.mb--l { margin-bottom: var(--space-l); }
.mb--m { margin-bottom: var(--space-m); }
.mb--s { margin-bottom: var(--space-s); }
.mb--xs { margin-bottom: var(--space-xs); }
.mb--2xs { margin-bottom: var(--space-2xs); }
.mb--3xs { margin-bottom: var(--space-3xs); }

/* --------------------------------------------------------------------------
   Paddings
   -------------------------------------------------------------------------- */

.pad--4xl { padding: var(--space-4xl); }
.pad--3xl { padding: var(--space-3xl); }
.pad--2xl { padding: var(--space-2xl); }
.pad--xl { padding: var(--space-xl); }
.pad--l { padding: var(--space-l); }
.pad--m { padding: var(--space-m); }
.pad--s { padding: var(--space-s); }
.pad--xs { padding: var(--space-xs); }
.pad--2xs { padding: var(--space-2xs); }
.pad--3xs { padding: var(--space-3xs); }

/* --------------------------------------------------------------------------
   Others
   -------------------------------------------------------------------------- */

.radius--o { border-radius: var(--space-2xl); }
.radius--l { border-radius: var(--space-xl); }
.radius--m { border-radius: var(--space-s); }
.radius--s { border-radius: var(--space-xs); border-style: solid; }

.shadow--default { box-shadow: 0 var(--space-3xs) var(--space-xs) var(--color-shadow); }

.width--container { width: var(--space-container); }
.width--full { width: 100%; }

/* toc--ignore: no settings defined (marker class) */