:root {
  --body-bg: #eee;
}

.section--title {
  justify-content: center;
  flex-direction: column;

  .section--bgImage-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -14vh;
    box-shadow: inset 0 0 25vw black;
    @media (orientation: landscape) {
      margin-top: -26vh;
      width: calc(100% - 40px);
      border-radius: 1em;
    }
  }

  .section--bgImage {
    width: 100%;
    min-width: 600px;
    height: auto;
    margin: 0 auto;
    opacity: 0.8;
  }
}

.title-container {
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  padding-bottom: 0;
  margin: 15vmin auto 0;
  z-index: 1;
}

.title-text {
  display: block;
  font-size: calc(2em + 8vw);
  line-height: 0.8;
  margin: 0 auto;
  font-weight: 900;
  color: #00000050;
  filter: blur(3px);
  transform: rotate(-3deg);
  left: 15px;
  @media (orientation: landscape) {
    font-size: calc(2em + 10vw);
  }
  .mix-number {
    color: var(--body-bg);
  }
}