/* xs */
/* @media (min-width: 475px) {
} */

/* sm */
/* @media (min-width: 640px) {
} */
/* md */
/* @media (min-width: 768px) {
} */
/* lg */
/* @media (min-width: 1024px) {
} */
/* xl */
/* @media (min-width: 1280px) {
} */

/* 2xl */
/* @media (min-width: 1536px) {
} */

/**************************************/
/* Helper class */
/**************************************/
/* button */
.btn {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05em;
  background-color: var(--clr-lighter);
  color: var(--clr-dark);
  padding: 0.5rem 1em;
  border-radius: 100px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 5px rgb(92, 89, 195, 0.25),
    0 10px 10px rgb(92, 89, 195, 0.22), 0 0 15px -10px var(--clr-lighter);
}

.section {
  margin-bottom: 4rem;
}

/* ALL MEDIA QUERIES SYSTEM  */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  /* border: 1px rebeccapurple solid; */
}

/* xs */
@media (min-width: 475px) {
  .container {
    max-width: 475px;
  }
}

/* sm */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
/* md */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
/* lg */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
/* xl */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* 2xl */
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* GRID SYSTEM   */
.grid {
  display: grid;
}
.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);
} */