* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* color */
  --main: #5b21b6;

  /* ALTS */
  --accent: #115e59;
  --dark-accent: #022c22;
  --light-accent: #2dd4bf;

  /* GREY */
  --main-grey: #0a0a0a;
  --dark-grey: #171717;
  --light-grey: #e5e5e5;

  /* FONT SIZE 
  - Font sizes (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
  */
  --text-xs: 1.2rem;
  --text-sm: 1.4rem;
  --text-base: 1.6rem;
  --text-lg: 1.8rem;
  --text-xl: 2rem;
  --text-2x1: 2.4rem;
  --text-3x1: 3rem;
  --text-3x2: 3.6rem;
  --text-4x1: 4.4rem;
  --text-5x1: 5.2rem;
  --text-6x1: 6.2rem;
}

html {
  font-size: 62.5%;

  scroll-behavior: smooth;
  -moz-scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 5rem;
}

body {
  background: white;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  color: var(--dark-grey);
}

/* --------- RESET --------- */
p {
  color: var(--dark-grey);
  font-size: var(--text-lg);
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.3;
}

img {
  display: block;
  width: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  border: none;
  background: none;
}

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

.section {
  padding-block: 5rem;
}

.grid {
  display: grid;
  /* column-gap: 8rem;
  row-gap: 5rem; */
}

.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);
}

.subheading {
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  font-size: var(--text-sm);
  color: var(--alt);
}

.section-heading {
  font-size: var(--text-4x1);
}