.page {
  z-index: 0;
  &.bg-light {
    background-color: var(--color-light);

    .pages-blue-bg {
      &::after {
        background-color: var(--color-light);
      }
    }
  }
}

.page.bg-light ~ .footer {
  .footer-newsletter {
    &::after {
      background-color: var(--color-light);
    }
  }
}
.pages-title {
  font-size: var(--font-size-huge);
  font-family: var(--font-family-serif);
  font-weight: var(--font-family-book);
  margin: 40px 0 15px 0;
  color: var(--color-primary);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  word-break: break-all;
}

.pages-header {
  margin-top: -55px;
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center center;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  h1 {
    display: block;
    padding: 5px 20px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    margin: 0;
  }
}

.pages-content {
  margin: 75px 0 100px 0;
}

.pages-blue-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background-color: var(--color-primary);
  overflow: hidden;
  z-index: -1;

  &:after {
    content: '';
    position: absolute;
    bottom: -300px;
    left: 0;
    transform-origin: left;
    transform: rotate(-3.75deg);
    width: 120%;
    height: 300px;
    background-color: var(--color-white);
  }

  &.bg-high {
    height: 650px;

    &:after {
      height: 600px;
      bottom: -600px;
    }
  }
}