<!-- The boilerform namespace -->
<form class="boilerform" action="" method="post">
    <h1 class="o-heading">Card payment</h1>
    <div class="c-card-payment">
        <div class="c-card-payment__field c-card-payment__field--fill">
            <label for="card_number" class="c-label">Card number</label>
            <input type="number" name="card_number" id="card_number" min="1" max="9999999999999999" class="c-input-field" placeholder="4242 4242 4242 4242" />
        </div>
        <div class="c-card-payment__field">
            <label for="expiry_date" class="c-label">Expiry date</label>
            <input type="text" name="expiry_date" id="expiry_date" class="c-input-field" placeholder="MM/YY" />
        </div>
        <div class="c-card-payment__field">
            <label for="cvv" class="c-label">CVV</label>
            <input type="number" name="cvv" id="cvv" min="1" max="999" class="c-input-field" placeholder="123" />
        </div>
        <div class="c-card-payment__field">
            <label for="zip_code" class="c-label">Zip Code</label>
            <input type="text" name="zip_code" id="zip_code" class="c-input-field" placeholder="12345" />
        </div>
        <div class="c-card-payment__field c-card-payment__field--fill">
            <div class="c-check-field">
                <input type="checkbox" name="wants_receipt" id="wants_receipt" class="c-check-field__input" />
                <label for="wants_receipt" class="c-check-field__decor" aria-hidden="true" role="presentation"></label>
                <label for="wants_receipt" class="c-check-field__label">Receive a copy of the receipt in your inbox?</label>
            </div>
        </div>
        <div class="c-card-payment__button">
            <button class="c-button" type="submit">Pay</button>
        </div>
    </div>
</form>

// Heading object 
.o-heading {
    display: block;
    width: 100%;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
    padding: 0 0 5px 0;
    margin: 40px auto 20px auto;
    max-width: 500px;
}

// Signup component
.c-card-payment {
    min-width: 300px;
    max-width: 500px;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px; 
    
    &__field {
        
        > input[type] {
            width: 100%;    
        }
        
        &--fill {
            grid-column: span 3;
        }
    }
    
    &__button {
        grid-column: span 3;
        text-align: right;
    }
}

// CB override
.boilerform .c-check-field__decor {
    background: white;
}











// Presentational styles
body {
    background: #f3f3f3;
    font-family: sans-serif;
}