/*
    - Name: "layout.scss"
    - Description: "Layout custom styles"
*/
/* Media query breakpoints */
/* Containers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter-container);
  padding-right: var(--gutter-container);
}

.container-custom {
  width: 100%;
  max-width: var(--container-custom);
  margin: 0 auto;
  padding-left: var(--gutter-container);
  padding-right: var(--gutter-container);
}

.small-container {
  width: 100%;
  max-width: var(--small-container);
  margin: 0 auto;
  padding-left: var(--gutter-container);
  padding-right: var(--gutter-container);
}
@media (min-width: 1025px) {
  .small-container:has(.c-banner-secondary__header) {
    padding-left: var(--gutter-container-lg);
    padding-right: var(--gutter-container-lg);
  }
}

.layout.container {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .layout--twocol-section {
    --column-gap: 40px;
  }
}

.layout-wrapper {
  position: relative;
  z-index: 1;
}
.layout-wrapper.bg-yellow {
  background-color: var(--primary-background);
}
.layout-wrapper.bg-mid-yellow {
  background-color: var(--yellow-100);
}
/*# sourceMappingURL=layout.css.map */