.page-communication_snackbar {
  /* initialize it off screen. */
  .loading .example .mdc-snackbar {
    transform: translateY(200%);
  }

  /* Override style for hero example. */
  .hero .mdc-snackbar {
    position: relative;
    left: auto;
    z-index: 0;
  }

  .hero .mdc-snackbar--active {
    transform: none;
  }
}
