/* Default styles for the container */
.l-container {
  width: 100%;
}

/* Extra Small: up to 575px */
@media (max-width: 575px) {
  .l-container {
    width: 100%;
    padding: 0 var(--padding-xl);
  }
}

/* Small: 576px and up */
@media (min-width: 576px) {
  .l-container {
    max-width: 540px;
  }
}

/* Medium: 768px and up */
@media (min-width: 768px) {
  .l-container {
    max-width: 720px;
  }
}

/* Large: 992px and up */
@media (min-width: 992px) {
  .l-container {
    max-width: 960px;
  }
}

/* X-Large: 1200px and up */
@media (min-width: 1200px) {
  .l-container {
    max-width: 1120px;
  }
}