<section class="snowball-block snowball-block-splash{{full-width}}">
  <div class="snowball-block-splash-bg{{parallax}}"></div>
  <div class="snowball-block-splash-darken-bg"></div>
  <div class="snowball-block-splash-inner">
    {{content}}
  </div>
<style scoped>
.snowball-block-splash {
  position: relative;
  height: 100vh;
  min-height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-flex-pack: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-flex-align: center;
  -ms-align-items: center;
  align-items: center;
  color: {{color}};
}

.snowball-block-splash-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-image: url('{{background-image}}');
  background-color: {{background-color}};
  background-position: center center;
  background-size: cover;
}

.snowball-block-splash-bg.parallax {
  background-attachment: fixed;
}

.snowball-block-splash-darken-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 15;
  background-color: black;
  opacity: {{darken-bg-value}};
}

.snowball-block-splash-inner {
  z-index: 20;
  text-align: center;
  position: relative;
}
</style>
</section>