/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #firstPanel {
    width: 100%;
    padding-left: 50px;
  }
  #secondPanel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 600px) {
  #firstPanel {
    width: 50%;
    height: 100vh;
    padding-left: 50px;
  }
  #secondPanel {
    width: calc(50% - 100px);
    height: 100vh;
    padding-left: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}