/* 
--- 01 TYPOGRAPHY SYSTEM

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

FONT WEIGHTS
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

LINE HEIGHTS
Default: 1
Small: 1.05
Paragraph default: 1.6

--- 02 COLORS

Primary: #a61e4d
Tints: #f6e9ed, #D38FA6, #f1dbe3
Shades: #951b45
Accents:
Greys: #555, #333, #686868 (lightest gray allowed on #f6e9ed)

--- 05 SHADOWS

hover btn: 0 0 2rem rgba(0, 0, 0, 0.1);
active btn: box-shadow: 0 0 0 0.8rem #dba5b8;
                        inset 0 0 0 3px #fff;
                         0 0 0 0.8rem #d38fa6;

--- 06 BORDER-RADIUS

Default: 9px

--- 07 WHITESPACE

SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/


/**********************************/
/* GENERAL REUSABLE COMPONENTS */
/**********************************/

.container {
  max-width: 90%;
  margin: auto;
  padding: 4rem 0;
}
.containers {
  max-width: 94%;
  margin: auto;
}
.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.heading-primary,
.heading-secondary,
.heading-teriary {
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
}

.heading-primary {
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}

.heading-secondary {
  font-size: 4.4rem;
  margin-bottom: 5rem;
  line-height: 1.2;
}

.heading-teriary {
  font-size: 3rem;
  margin-bottom: 3.2rem;
  line-height: 1.2;
}

.subheading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 2rem;
  letter-spacing: 0.75px;
}

.margine-right-sm {
  margin-right: 1.6rem !important;
}
.margine-left-sm {
  margin-left: 1.6rem !important;
}
.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}

.margin-top-md {
  margin-top: 4.8rem !important;
}
strong {
  font-weight: 500;
}