@layer layouts {
  /*
   * Container
   */

  .container-center {
    margin-right: auto;
    margin-left: auto;
    max-width: var(--breakpoint-large);
    padding-left: 2.625rem;
    padding-right: 2.625rem;

    @media (max-width: 991.98px) {
      padding-left: 1.250rem;
      padding-right: 1.250rem;
    }

    @media (max-width: 639.98px) {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  .container-fluid {
    max-width: 100%;
    padding-left: 2.625rem;
    padding-right: 2.625rem;

    @media (max-width: 991.98px) {
      padding-left: 1.250rem;
      padding-right: 1.250rem;
    }

    @media (max-width: 639.98px) {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  .container {
    padding: 4rem 0;

    @media (max-width: 1199.98px) {
      padding: 3rem 0;
    }

    @media (max-width: 991.98px) {
      padding: 2.5rem 0;
    }

    @media (max-width: 639.98px) {
      padding: 2rem 0;
    }
  }
}