@import 'palette';

.heroic-padding {
  $move-up: 32px;

  background: black url('/assets/images/backdrop-01.jpg') center;
  background-size: cover;
  color: $color-bright-secondary;
  fill: $color-bright-secondary;
  margin-top: -$move-up;
  padding: (128px + $move-up) 0 128px;
  text-shadow: 0 0 2px $color-main-foreground;
}

.tagline {
  background-color: transparentize($color-theme-1, 0.25);
  text-align: center;

  span {
    display: inline-block;
    width: 10%;
  }
}

.whitespace-weight-balancing {
  height: 32px;
}

@import 'palette';

.heroic-padding {
  $move-up: 32px;

  background: black url('/assets/images/backdrop-01.jpg') center;
  background-size: cover;
  color: $color-bright-secondary;
  fill: $color-bright-secondary;
  margin-top: -$move-up;
  padding: (128px + $move-up) 0 128px;
  text-shadow: 0 0 2px $color-main-foreground;
}

.tagline {
  background-color: transparentize($color-theme-1, 0.25);
  text-align: center;

  span {
    display: inline-block;
    min-width: 10%;
  }
}

.whitespace-weight-balancing {
  height: 32px;
}

Fix text overlapping on small screens
Fix text overlapping on small screens

