/* Structural layout. */

.bg-container {
  width: min(100% - clamp(2rem, 5vw, 4rem), var(--bg-container));
  margin-inline: auto;
}

.bg-main {
  padding-top: var(--bg-header-height);
}

.bg-main.bg-home {
  padding-top: 0;
}

.bg-section {
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
  position: relative;
}

.bg-section + .bg-section {
  border-top: 1px solid var(--bg-rule);
}

.bg-section-heading {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.bg-section-heading--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin-inline: auto;
  text-align: center;
}

.bg-section-heading--center .bg-section-heading__text {
  margin-inline: auto;
  text-align: center;
}

.bg-section-heading--center .bg-section-heading__text > * {
  margin-inline: auto;
}

.bg-section-heading--with-link {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: end;
}

.bg-section-heading p {
  margin-top: 1rem;
  max-width: 62ch;
}

.bg-section-heading__text {
  margin-top: 1rem;
  max-width: 62ch;
}

.bg-section-heading__text > * {
  margin: 0;
}

.bg-section-heading__text > * + * {
  margin-top: 0.55rem;
}

.bg-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.bg-split__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.bg-split__media {
  min-width: 0;
}

.bg-page,
.bg-single,
.bg-blog-index,
.bg-archive,
.bg-search,
.bg-error-page,
.bg-contact-page,
.bg-work-page,
.bg-index {
  padding-block: clamp(6.25rem, 10vw, 9rem) clamp(4.75rem, 8vw, 7rem);
}

@media (min-width: 48rem) {
  .bg-section-heading--with-link {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 64rem) {
  .bg-split {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .bg-split--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  }

  .bg-split--reverse .bg-split__media {
    order: 1;
  }

  .bg-split--reverse .bg-split__content {
    order: 2;
  }

}