/* ------------ ------------ LAYOUT ------------ ------------ */
:root {
    --container-breakpoints-xs: 576px;
    --container-breakpoints-sm: 768px;
    --container-breakpoints-md: 1024px;
    --container-breakpoints-lg: 1280px;
    --container-breakpoints-xl: 1400px;

    --container-max-widths-xs: 540px;
    --container-max-widths-sm: 745px;
    --container-max-widths-md: 992px;
    --container-max-widths-lg: 1260px;
    --container-max-widths-xl: 1380px;

    --padding-container-xs: 1rem;
}

/* ------------ TEMPLATE BLOCK LAYOUT ------------ */
.container {
  max-width: var(--container-max-widths-sm);
  margin: 0 15px;
}

/* --container-breakpoints-sm */
@media (min-width: 768px) {
  .container {
    margin: 15px auto;
  }
}

@media (min-width: 768px) {
  .container {
    margin:  0 auto;
  }
}


/* --container-breakpoints-md */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-max-widths-md);
    margin:  0 auto;
  }
}


/* --container-breakpoints-lg */
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-max-widths-lg);
  }
}


/* --container-breakpoints-xl */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-max-widths-xl);
  }
}