.modal {
  position: fixed;
  top: 20%;
  left: 5%;
  width: 90%;
  background-color: hsl(0, 0%, 100%);
  padding: 2rem 1rem;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.2);
  display: none;
}

#backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.6);
  display: none;
}

@media (min-width: 48rem) {
  .modal {
    left: calc(50% - 20rem);
    width: 40rem;
  }
}