/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 600px) {
  .top-panel {
    width: calc(100% - 30px);
  }

  .info-text {
    width: 100%;
  }

  .controls-wrapper {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .button-group {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
  }

  .top-panel button {
    flex: 1;
    min-width: 0;
  }

  .slider-group {
    justify-content: center;
    width: 100%;
  }

  /* make slider span full width on mobile */
  .slider-container {
    width: 100%;
  }
}