.container {
  width: 100%; /* Occupy full width by default (mobile-first) */
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

/* Define breakpoints and max-widths */
@media (min-width: 640px) { /* sm breakpoint */
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) { /* md breakpoint */
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) { /* lg breakpoint */
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1280px) { /* xl breakpoint */
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1536px) { /* 2xl breakpoint */
  .container {
    max-width: 768px;
  }
}


.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

label,input{
  display:flex;
  flex-direction:column;
}

label {
		margin-top: 1em;
}