:root {
  --white-color: rgb(255, 255, 255);
  --black-color: rgb(0 0 0);
  --primary-color: rgb(157, 149, 87);
  --container: 1440px;
  --padding-x: 18px;
}

/* 
* Estilos generales
* ------------------
*/

p::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
ul li::selection,
span::selection,
strong::selection {
  background-color: var(--primary-color);
}

.container {
  max-width: var(--container);
}

.padding__xl {
  padding: 120px var(--padding-x);
}

.padding__lg {
  padding: 80px var(--padding-x);
}

.padding__md {
  padding: 60px var(--padding-x);
}

@media (width <= 992px) {
  .padding__xl,
  .padding__lg,
  .padding__md {
    padding: var(--padding-x);
  }
}

/* 
* Tamaños de fuentes
* -------------------
*/

h1 {
  color: var(--white-color);
  font-size: 3rem;
  font-family: 'Roboto-Bold';
}

h2 {
  color: var(--white-color);
  font-size: 2.6rem;
  font-style: italic;
  font-family: 'Roboto-Medium';
}

@media (width <= 992px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.8rem;
  }
}

p {
  font-family: 'Roboto-Regular';
  font-size: 18px;
}