Cacher is the code snippet organizer for pro developers

.wrap.pd-3.pt-5
  .lay_card.pt-2
    .cnt
      h1.h1 Sign Up
      h2.h2 Sign Up for Free!
   
    form.from.pd-2.mt-3
      .org_form
        p.mt-2.mb-4.main ※required
        .mol_form.fx.fx_wrap.set
          .form_group.input.mr-2
            label ※First Name
            input(type="text", name="" required)
          .form_group.input
            label Last Name
            input(type="text", name="")
      .org_form
        .mol_form.single
          .form_group.mail.mt-5
            label ※Email
            input(type="text", name="" required)
          .form_group.pass.mt-5
            label ※Password
            input(type="text", name="" required)
            
      button.button(type='submit') Get Started            

/*
  Mixin css from 
  https://codepen.io/pistol/pen/OJLYYKr

$bkp: 640px
$wh: #f9f9f9
$main: #b5943e

@mixin wh
  color: $wh
.wh
  +wh
@mixin main
  color: $main
.main
  +main
  
@importurl('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap')

body
  background: #4b6669
  color: #678  
  font-family: 'Titillium Web', sans-serif
  @media only screen and (max-width: $bkp)
    background: #234

.lay_card
  +wh
  background: #234
  max-width: 560px
  margin: auto
  border-radius: 8px
  // min-height: 80vh
  @media only screen and (max-width: $bkp)
    background: none
  .h1, .h2
    font-weight: 300
  .h2
    &:after
      content: ""
      display: block
      padding-bottom: 32px
      border-bottom: 1px solid $main

  @media only screen and (max-width: $bkp)
    display: flex
    flex-direction: column
    align-items: center
    width: 100%
    

  .from
    .org_form
      // background: #222
      width: auto
      padding: 0 36px 

      .mol_form
        @media only screen and (max-width: $bkp)
          display: flex
          flex-direction: column
        .form_group
          position: relative
          @media only screen and (max-width: $bkp)
            margin: auto
            &:nth-child(2)
              margin-top: 32px
              margin-bottom: 32px
          label
            position: absolute
            top: -$sz_5
            color: #abc
          input[type="text"]
            width: 200px
            padding: $sz_2
            font-size: $sz_5
            background: none
            border: 1px solid #999
            +wh
            @media only screen and (max-width: $bkp)
              width: 240px
              
      .mol_form.single
        .form_group
          input[type="text"]
            width: 100%
            max-width: 434px
            @media only screen and (max-width: $bkp)
              width: 240px
  
    button.button
      display: flex
      justify-content: center
      background-color: $main
      margin: 24px auto
      color: $wh
      padding: 12px 24px
      width: calc(100% - 74px)
      max-width: 90%
      @media only screen and (max-width: $bkp)
        width: 80%

<link href="https://codepen.io/pistol/pen/OJLYYKr" rel="stylesheet" />