/* Transitional Opal section layer.
 * Safe utility classes for the shared section settings system.
 * Batch 2 intentionally keeps this light so it does not fight legacy CSS.
 */

.opal-section {
  position: relative;
}

.opal-section--pt-none { padding-top: 0; }
.opal-section--pt-sm { padding-top: 1rem; }
.opal-section--pt-md { padding-top: 2rem; }
.opal-section--pt-lg { padding-top: 3rem; }
.opal-section--pt-xl { padding-top: 5rem; }

.opal-section--pb-none { padding-bottom: 0; }
.opal-section--pb-sm { padding-bottom: 1rem; }
.opal-section--pb-md { padding-bottom: 2rem; }
.opal-section--pb-lg { padding-bottom: 3rem; }
.opal-section--pb-xl { padding-bottom: 5rem; }

.opal-section--bg-light { background-color: #f7f7f7; }
.opal-section--bg-dark { background-color: #0d1117; }
.opal-section--bg-brand { background-color: #3a287c; }

.opal-section--container-narrow .content_blocks { max-width: 900px; margin-left: auto; margin-right: auto; }
.opal-section--container-standard .content_blocks { max-width: 1200px; margin-left: auto; margin-right: auto; }
.opal-section--container-wide .content_blocks { max-width: 1440px; margin-left: auto; margin-right: auto; }

.opal-section--hide-mobile { display: block; }
@media (max-width: 767px) {
  .opal-section--hide-mobile { display: none !important; }
}