/* section {
    padding: 40px 20px 20px 20px;
    background-color: rgb(183, 183, 183);
    width: 350px;
    margin: 40px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 60% 40%;
}

#cardnumber {
    width: 100%;
    grid-column: 1/3;
}

#cardholder {
    width: 60%;
}

#holder { width: 60%; }

#expire {
    width: 40%;
    display: inline-block;
    float: right;
}

#mm, #yy {
    width: 48%;
    text-align: center;
}

label {
    display: block;
} */

main {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 10% 70% 10% 10%;
    width: 500px;
}

section {
    grid-column: 1/3;
    grid-row: 1/3;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: repeat(3, 1fr);
    background-color: gray;
    width: 350px;
}

section p {
    padding: 20px;
    margin: 0;
}

#number {
    grid-column: 1/3;
    grid-row: 2/3;
}

#number input {
    width: 98%;
}

.card-image {
    grid-column: 2/3;
    grid-row: 1;
}

.cvc {
    grid-column: 2/4;
    grid-row: 2/4;
    background-color: grey;
}

button {
    grid-column: 3/4;
    grid-row: 4/5;
}