/* CONTAINERS LAYOUT*/

.container-xs {
  width: min(var(--container-xs-max-width), 100% - var(--screen-gutter) * 2);
  margin-inline: auto;
}
.container-s {
  width: min(var(--container-s-max-width), 100% - var(--screen-gutter) * 2);
  margin-inline: auto;
}
.container-m {
  width: min(var(--container-m-max-width), 100% - var(--screen-gutter) * 2);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container-d-m {
    width: min(var(--container-m-max-width), 100% - var(--screen-gutter) * 2);
    margin-inline: auto;
  }
}

.container-l {
  width: min(var(--container-l-max-width), 100% - var(--screen-gutter) * 2);
  margin-inline: auto;
}

.fit-content {
  width: fit-content;
  max-width: 100%;
}

/* CONTENT LAYOUT*/

.grid-auto-2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)) !important;
  grid-template-rows: auto !important;
}

.grid-auto-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important;
  grid-template-rows: auto !important;
}

.grid-auto-4 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  grid-template-rows: auto !important;
}

.grid {
  display: grid !important;
}

.grid-rows-auto {
  grid-template-rows: auto !important;
}

.grid-rows-1fr {
  grid-auto-rows: 1fr !important;
}

@media (min-width: 1025px) {
  .grid-d-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-d-half-l {
    grid-template-columns: 0.5fr 1fr !important;
  }
  .grid-d-half-r {
    grid-template-columns: 1fr 0.5fr !important;
  }
  .grid-d-2third-l {
    grid-template-columns: 2fr 3fr !important;
  }
  .grid-d-2third-r {
    grid-template-columns: 3fr 2fr !important;
  }
  .grid-d-3quarter-l {
    grid-template-columns: 3fr 4fr !important;
  }
  .grid-d-3quarter-r {
    grid-template-columns: 4fr 3fr !important;
  }
  .grid-d-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .grid-d-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .grid-d-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .span-c-d-2 {
    grid-column: span 2;
  }
}

@media ((min-width: 768px) and (max-width: 1024px)) {
  .grid-t-1 {
    grid-template-columns: 1fr !important;
  }
  .grid-t-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-t-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-t-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

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

.flex-row {
  display: flex !important;
  flex-direction: row !important;
}

.flex-column {
  display: flex !important;
  flex-direction: column !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: start !important;
}

.align-self-start {
  align-self: start !important;
}

.align-items-end {
  align-items: end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: end !important;
}
.align-self-center {
  align-self: center !important;
}

.align-self-end {
  align-self: end !important;
}

@media (min-width: 1025px) {
  .align-self-end-d {
    align-self: end !important;
  }
}

.margin-right-auto {
  margin-right: auto;
}

.margin-left-auto {
  margin-left: auto;
}

@media (min-width: 1025px) {
  .margin-left-auto-d {
    margin-left: auto;
  }
}

/* COLORS */

.bg-primary {
  background-color: var(--clr-primary);
}

.bg-primary-l-1 {
  background-color: var(--clr-bg-primary-l-1);
}

.bg-primary-l-2 {
  background-color: var(--clr-bg-primary-l-2);
}

.bg-secondary {
  background-color: var(--clr-secondary);
}

.bg-secondary-l-1 {
  background-color: var(--clr-bg-secondary-l-1);
}

.bg-secondary-l-2 {
  background-color: var(--clr-bg-secondary-l-2);
}

.bg-accent1 {
  background-color: var(--clr-accent1);
}

.bg-accent1-l-1 {
  background-color: var(--clr-bg-accent1-l-1);
}

.bg-accent1-l-2 {
  background-color: var(--clr-bg-accent1-l-2);
}

.bg-grey-l-1 {
  background-color: var(--clr-bg-grey-l-1);
}

.bg-grey-l-2 {
  background-color: var(--clr-bg-grey-l-2);
}

.text-primary {
  color: var(--clr-text-primary);
}
.text-secondary {
  color: var(--clr-text-secondary);
}
.text-accent {
  color: var(--clr-text-accent);
}

.text-body {
  color: var(--clr-text-body);
}
.text-light {
  color: var(--clr-text-light);
}

.text-light-o50 {
  color: var(--clr-text-light-o50);
}

.text-light-o80 {
  color: var(--clr-text-light-o80);
}

.text-gradient {
  background: linear-gradient(to top, #77530a, #ffd277, #77530a);
  background-clip: text;
  color: transparent;
}

.break-word {
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.link-primary:link,
.link-primary:visited {
  color: var(--clr-text-primary);
}
.link-secondary:link,
.link-secondary:visited {
  color: var(--clr-text-secondary);
}
.link-accent:link,
.link-accent:visited {
  color: var(--clr-text-accent);
}
.link-body:link,
.link-body:visited {
  color: var(--clr-text-body);
}
.link-light:link,
.link-light:visited {
  color: var(--clr-text-light);
}

.link-light-o50:link,
.link-light-o50:visited {
  color: var(--clr-text-light-o50);
}

.clr-icon-light {
  fill: var(--clr-text-light);
}

.clr-icon-primary {
  fill: var(--clr-text-primary);
}

/* PADDING*/

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

.padding-top-s {
  padding-top: var(--space-s) !important;
}

.padding-top-m {
  padding-top: var(--space-m) !important;
}

.padding-top-l {
  padding-top: var(--space-l) !important;
}

.padding-bottom-m {
  padding-bottom: var(--space-m) !important;
}

.padding-bottom-l {
  padding-bottom: var(--space-l) !important;
}

.padding-left-m {
  padding-left: var(--space-m) !important;
}

.padding-left-l {
  padding-left: var(--space-l) !important;
}

.padding-right-m {
  padding-right: var(--space-m) !important;
}

.padding-right-l {
  padding-right: var(--space-l) !important;
}

.padding-right-xl {
  padding-right: var(--space-xl) !important;
}

.padding-block-m {
  padding-block: var(--space-m) !important;
}

/* MARGINS*/

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

.margin-top-s {
  margin-top: var(--space-s) !important;
}

.margin-top-m {
  margin-top: var(--space-m) !important;
}

.margin-top-l {
  margin-top: var(--space-l) !important;
}

.margin-bottom-xs {
  margin-bottom: var(--space-xs) !important;
}

.margin-bottom-s {
  margin-bottom: var(--space-s) !important;
}

.margin-bottom-m {
  margin-bottom: var(--space-m) !important;
}

.margin-bottom-l {
  margin-bottom: var(--space-l) !important;
}

.margin-bottom-xl {
  margin-bottom: var(--space-xl) !important;
}

.margin-bottom-2xl {
  margin-bottom: var(--space-2xl) !important;
}

.margin-left-m {
  margin-left: var(--space-m) !important;
}

.margin-left-l {
  margin-left: var(--space-l) !important;
}

.margin-right-m {
  margin-right: var(--space-m) !important;
}

.margin-right-l {
  margin-right: var(--space-l) !important;
}

.margin-right-xl {
  margin-right: var(--space-xl) !important;
}

/* GAPS*/

.gap-0,
.gap-0 > .e-con-inner:first-child {
  gap: 0;
}

.gap-4xs,
.gap-4xs > .e-con-inner:first-child {
  gap: var(--space-4xs);
}
.gap-3xs,
.gap-3xs > .e-con-inner:first-child {
  gap: var(--space-3xs);
}
.gap-2xs,
.gap-2xs > .e-con-inner:first-child {
  gap: var(--space-2xs);
}
.gap-xs,
.gap-xs > .e-con-inner:first-child {
  gap: var(--space-xs);
}
.gap-s,
.gap-s > .e-con-inner:first-child {
  gap: var(--space-s);
}
.gap-m,
.gap-m > .e-con-inner:first-child {
  gap: var(--space-m);
}
.gap-l,
.gap-l > .e-con-inner:first-child {
  gap: var(--space-l);
}
.gap-xl,
.gap-xl > .e-con-inner:first-child {
  gap: var(--space-xl);
}
.gap-2xl,
.gap-2xl > .e-con-inner:first-child {
  gap: var(--space-2xl);
}
.gap-3xl,
.gap-3xl > .e-con-inner:first-child {
  gap: var(--space-3xl);
}
.gap-4xl,
.gap-4xl > .e-con-inner:first-child {
  gap: var(--space-4xl);
}

/* TEXT SIZES*/

.text-2xs,
.text-2xs > *:first-child {
  font-size: var(--text-2xs);
}

.text-xs,
.text-xs > *:first-child {
  font-size: var(--text-xs);
}
.text-s,
.text-s > *:first-child {
  font-size: var(--text-s);
}
.text-m,
.text-m > *:first-child {
  font-size: var(--text-m);
}
.text-l,
.text-l > *:first-child {
  font-size: var(--text-l);
}
.text-xl,
.text-xl > *:first-child {
  font-size: var(--text-xl);
}
.text-2xl,
.text-2xl > *:first-child {
  font-size: var(--text-2xl);
}
.text-3xl,
.text-3xl > *:first-child {
  font-size: var(--text-3xl);
}
.text-4xl,
.text-4xl > *:first-child {
  font-size: var(--text-4xl);
}

/* FONT WEIGHT*/

.font-100 {
  font-weight: 100;
}
.font-200 {
  font-weight: 200;
}
.font-300 {
  font-weight: 300;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.font-900 {
  font-weight: 900;
}

/* SECTIONS LAYOUT*/
.section-mt {
  margin-block: clamp(3rem, calc(8vh + 4vw), 10rem) 0;
}

.section-mtb {
  margin-block: clamp(3rem, calc(8vh + 4vw), 10rem) clamp(3rem, calc(8vh + 4vw), 20rem);
}

.section-mb {
  margin-block: 0 clamp(3rem, calc(8vh + 4vw), 20rem);
}

.section-mb-ptb {
  margin-block: 0 clamp(3rem, calc(8vh + 4vw), 20rem);
  padding-block: clamp(3rem, calc(8vh + 4vw), 20rem);
}

.section-ptb {
  padding-block: clamp(3rem, calc(8vh + 4vw), 20rem);
}

/* LIST SPACING*/

.list-space-xs li:not(:last-child) {
  margin-bottom: var(--space-xs);
}

.list-space-s li:not(:last-child) {
  margin-bottom: var(--space-s);
}

.list-space-m li:not(:last-child) {
  margin-bottom: var(--space-m);
}

/* LIST POINTS*/

.list-points ul,
.list-points ol {
  padding-left: 20px;
}

.list-points-primary li::marker {
  color: var(--clr-bg-primary);
}

/* LIST DIVIDER*/

.list-divider-m li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-m) / -2);
  height: 1px;
  background-color: var(--clr-grey-l-1);
}

/* ICON COLOR */

.icon-primary,
.icon-primary i,
.icon-primary svg {
  fill: var(--clr-primary);
  stroke: var(--clr-primary);
  color: var(--clr-primary);
}

.icon-secondary,
.icon-secondary i,
.icon-secondary svg {
  fill: var(--clr-secondary);
  stroke: var(--clr-secondary);
  color: var(--clr-secondary);
}

.icon-accent1,
.icon-accent1 i,
.icon-accent1 svg {
  fill: var(--clr-accent1);
  stroke: var(--clr-accent1);
  color: var(--clr-accent1);
}

.icon-light,
.icon-light i,
.icon-light svg {
  fill: var(--clr-light);
  stroke: var(--clr-light);
  color: var(--clr-light);
}

.icon-validation,
.icon-validation i,
.icon-validation svg {
  fill: var(--clr-validation);
  stroke: var(--clr-validation);
  color: var(--clr-validation);
}

.icon-error,
.icon-error i,
.icon-error svg {
  fill: var(--clr-error);
  stroke: var(--clr-error);
  color: var(--clr-error);
}

/* LIST COLOR*/

.list-icon-primary svg {
  fill: var(--clr-primary);
}

.list-icon-primary-l-1 svg {
  fill: var(--clr-primary-l-1);
}

.list-icon-secondary svg {
  fill: var(--clr-secondary);
}

.list-icon-accent1 svg {
  fill: var(--clr-accent1);
}

.list-icon-light svg {
  fill: var(--clr-light);
}

.list-text-primary a,
.list-text-primary li {
  color: var(--clr-primary);
}

.list-text-secondary a,
.list-text-secondary li {
  color: var(--clr-primary);
}

.list-text-accent a,
.list-text-accent li {
  color: var(--clr-accent);
}

.list-text-light a,
.list-text-light li {
  color: var(--clr-light);
}

/* GRID*/

.grid-c2-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(512px, 100%), 1fr));
}

/* RADIUS */

.radius-site {
  border-radius: var(--radius-site);
}

.radius-xs {
  border-radius: var(--radius-xs);
}
.radius-s {
  border-radius: var(--radius-s);
}
.radius-m {
  border-radius: var(--radius-m);
}
.radius-l {
  border-radius: var(--radius-l);
}
.radius-xl {
  border-radius: var(--radius-xl);
}
.radius-full {
  border-radius: var(--radius-full);
}

/* TEXT-DECORATION */

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

.oblique-10 {
  transform: skewX(-10deg);
}

.uppercase {
  text-transform: uppercase;
}

.text-nowrap {
  text-wrap: nowrap;
}

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

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

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

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

.text-underline-center {
  align-self: center;
  padding-bottom: 2rem;
  text-align: center;
}

.text-underline-center::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  margin-top: 2rem;
}

.text-underline-left {
  align-self: start;
  padding-bottom: 2rem;
}

.text-underline-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  margin-top: 2rem;
}

.text-underline-primary::after {
  background: var(--clr-bg-primary);
}

.text-underline-secondary::after {
  background: var(--clr-bg-secondary);
}

.text-underline-accent1::after {
  background: var(--clr-bg-accent1);
}

.text-underline-text::after {
  background: var(--clr-text-body);
}

/* TEXTBOX SIZE */

.textbox-s {
  width: 100%;
  max-width: 60ch !important;
}

.textbox-m {
  width: 100%;
  max-width: 80ch !important;
}

.textbox-l {
  width: 100%;
  max-width: 100ch !important;
}

/* STYLING */

.overlay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/* ICON SIZE */

.icon-s svg,
.icon-s i {
  height: var(--text-s) !important;
  width: var(--text-s) !important;
  font-size: var(--text-s) !important;
}

.icon-m svg,
.icon-m i {
  width: var(--text-m) !important;
  height: var(--text-m) !important;
  font-size: var(--text-m) !important;
}

.icon-l svg,
.icon-l i {
  width: var(--text-l) !important;
  height: var(--text-l) !important;
  font-size: var(--text-l) !important;
}

.icon-xl svg,
.icon-xl i {
  width: var(--text-xl) !important;
  height: var(--text-xl) !important;
  font-size: var(--text-xl) !important;
}

.icon-2xl svg,
.icon-2xl i {
  width: var(--text-2xl) !important;
  height: var(--text-2xl) !important;
  font-size: var(--text-2xl) !important;
}

/* ICON STROKE */

.icon-stroke-10 svg {
  stroke-width: 10;
}

.icon-stroke-15 svg {
  stroke-width: 15;
}

.icon-stroke-20 svg {
  stroke-width: 20;
}