.screen
  .illustration
    h3 Checkout
    img(src="https://ouch-cdn2.icons8.com/sMdnu9KC_CDyuEfohi0P8HR0outXXYZ4xKn7uaNJ7Hw/rs:fit:1511:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNzky/LzJmNTAwYjU1LTc4/M2MtNGYyMy1iZmVm/LTNhMDg0NWFkNTVj/Yi5zdmc.png", alt="Credit Card")
  .checkout
    form#form
      .name
        label(for="name") Cardholder Name
        input#name(type="text")
      .num
        label(for="card_num") Card Number
        input#card_num(type="tel" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}")
      .sec
        .date
          label(for="date") Exp Date
          input#date(type="date")
        .cvc
          label(for="cvc") CVC
          input#cvc(type="password")
    .button
      button Check out ›

body {
  display: grid;
  place-content: center;
  height: 100vh;
  background: #ffdcef;
  font-family: 'Roboto';
}
.screen {
  margin: auto;
  padding: 0 1em 1em 1em;
  background: #fff;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  border-radius: 1em;
  .illustration {
    display: grid;
    justify-items: center;
    align-content: center;
    padding: 0 1em 1em 1em;
    img { width: 20em }
    h3 {
      padding: .8em;
      background: #440A67;
      color: #fff;
      border-radius: .5em;
      font-weight: 900;
    }
  }
  .checkout {
    padding: 1em;
    form {
      display: grid;
      grid-gap: 2em;
      div { 
        display: grid;
        grid-gap: .2em;
      }
      @mixin input($bg) {
        border: .1em solid $bg;
        background: transparent;
        border-radius: .3em;
        box-shadow: 0 .0 .25em rgba($bg, .5);
        padding: .4em;
        outline: none;
        color: $bg;
      }
      label[for=name] { color: #93329E; }
      input[type=text] { @include input(#93329E) }
      label[for=card_num] { color: #440A67 }
      input[type=tel] { @include input(#440A67) }
      label[for=date] { color: #B4AEE8; }
      input[type=date] { 
        @include input(#B4AEE8); 
        &::-webkit-datetime-edit { color: #B4AEE8; }
      }
      label[for=cvc] { color: #93329E; }
      input[type=password] { @include input(#93329E) }
      .sec {
        display: grid;
        grid-template-columns: repeat(2, .5fr);
        grid-gap: .5em;
      }
      label { font-weight: 700; }
    }
    .button {
      display: grid;
      justify-items: center;
      align-content: center;
      place-content: center;
      padding: 1em;
      padding-top: 2em;
      button {
        background: #440A67;
        color: #FFE3FE;
        border: none;
        padding: 0.8em;
        border-radius: 0.3em;
        font-weight: 700;
      }
    }
  }
}