/* 

--- 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


--LINE HEIGHTS:
Default: 1

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


--- 02 COLORS

-Primary: #3b5bdb #121b42
#087f5b

-Tints (darker to the primary color):
10% #3552c5 #077252
20% #2f49af #066649
30% #294099 #065940
40% #233783 #054c37
50% #1e2e6e #04402e
70% #121b42 #02261b
90% #060916 #010d09

-Shades (lighter to the primary color:
10% #4f6bdf #218c6b
20% #627ce2 #39997c
30% #768ce6 #52a58c
40% #899de9 #6bb29d
50% #9daded #84bfad
70% #c4cef4 #b5d9ce
80% #d8def8
90% #ebeffb #e6f2ef

-Accents

-Greys:
#555

--- 05 SHADOWS

--- 06 BORDER-RADIUS
10px

--- 07 WHITESPACE


*/

/**************************/
/* GENRAL REUSABLE COMPONENTS */
/**************************/

.container {
  /* 1140px */
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.container2 {
  /* 1140px */
  max-width: 120rem;

  padding: 0 3.2rem 0 3.2rem;
  margin: 0 auto;
}

.container3 {
  /* 1140px */
  max-width: 120rem;
  border-radius: 10px;

  /* padding: 0 3.2rem 0 3.2rem; */
  padding: 3.2rem;
  margin: 0 auto;
  margin-bottom: 3.6rem;
}

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;

  /* margin-bottom: 9.6rem; */
}

.grid-table {
  display: grid;
  column-gap: 2.4rem;
  /* row-gap: 9.6rem; */

  /* margin-bottom: 9.6rem; */
}

.grid2 {
  display: grid;
  column-gap: 2.4rem;
  row-gap: 3.2rem;

  /* margin-bottom: 9.6rem; */
}

/* .grid:last-child {
  margin-bottom: 0;
} */

.grid:not(:last-child) {
  margin-bottom: 9.6rem;
}

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

.grid--2-uneven {
  grid-template-columns: 0.8fr 1.2fr;
  /* 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);
}

.grid--center-v {
  align-items: center;
}

.margin-right-sm {
  margin-right: 1.6rem !important;
}

.margin-left-sm {
  margin-left: 3.2rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}