/* Overlapping half-flower borders (scroll with the page, skip the hero) */
.page-content {
  position: relative;
}

.page-border-left,
.page-border-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 1;
  pointer-events: none;
  background-image: url('../assets/decorations/toran-flower.svg'), url('../assets/decorations/toran-flower.svg');
  background-repeat: repeat-y, repeat-y;
  background-size: 64px 64px, 64px 64px;
}

.page-border-left {
  left: 0;
  background-position: -32px 0, -32px 34px;
}

.page-border-right {
  right: 0;
  background-position: 0 0, 0 34px;
}

@media (max-width: 640px) {
  .page-border-left,
  .page-border-right {
    width: 20px;
    background-size: 40px 40px, 40px 40px;
  }

  .page-border-left {
    background-position: -20px 0, -20px 22px;
  }

  .page-border-right {
    background-position: 0 0, 0 22px;
  }
}

.hero-toran-composite {
  position: relative;
  z-index: 1;
  margin-top: -24px;
}

.toran-flower-row {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 62px;
  background-image: url('../assets/decorations/toran-flower.svg'), url('../assets/decorations/toran-flower.svg');
  background-repeat: repeat-x, repeat-x;
  background-size: 62px 62px, 62px 62px;
  background-position: 0 0, 40px 0;
}

.toran-hang-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin-top: -20px;
}

@media (max-width: 640px) {
  .toran-flower-row {
    height: 38px;
    background-size: 38px 38px, 38px 38px;
    background-position: 0 0, 25px 0;
  }
}