@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: .5rem;
      padding-right: .5rem;
    }
  }
  
  .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: .5rem;
      padding-right: .5rem;
    }
  }
  
  .container {
    padding: 10rem 0;
  
    @media (max-width: 1199.98px) {
      padding: 8rem 0;
    }
  
    @media (max-width: 991.98px) {
      padding: 6rem 0;
    }
  
    @media (max-width: 639.98px) {
      padding: 5rem 0;
    }
  }
}