WebHero - 6 - Create responsive styling

create.pcss

  .create-container {
    @apply px-2 py-2 flex flex-col items-center;
  }

  form {
    @apply w-full pt-6 pb-8 mb-4;
    max-width: 768px;
  }

  .img-title-area {
    @apply flex flex-col;
  }

  .img-area {
    @apply flex-none mb-4;
    margin-left: auto;
    margin-right: auto;
  }

  .vote-area {
    @apply w-full mt-4 mb-4;
    margin-left: auto;
    margin-right: auto;
  }

  @screen sm {
    .create-container {
      @apply px-4 py-6;
    }

    .img-title-area {
      @apply flex-row;
    }

    .img-area {
      @apply mb-0;
      margin-left: 0;
      margin-right: 0;
    }

    .vote-area {
      @apply w-3/5 mb-0;
    }
  }