/* Front-end embed wrapper: fluid on phones, capped once there is room. */
.nsq-embed {
  width: 100%;
  margin: 0 auto;
  max-width: 900px;
}

.nsq-embed__frame {
  display: block;
  width: 100%;
  border: 0;
  /* Replaced by the real content height as soon as the form reports it. */
  height: var(--nsq-min-height, 700px);
  transition: height 0.2s ease-out;
  max-width: 100%;
  background: #fff;
}

/* The form draws its own gutters, so on phones drop any padding the theme's
   content column adds around the embed rather than double-indenting it. */
@media (max-width: 600px) {
  .nsq-embed {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nsq-embed__frame {
    transition: none;
  }
}