#card-info {
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr 6fr 1fr 1fr;
    gap: 5% 1%;
}

#front-card {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 5%;
    z-index: 2;
    background-color: lightgray;
    border-radius: 3%;
    box-shadow: 5px 5px 10px gray;
    padding: 25px;
}

#total {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

#image {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    justify-self: end;
}

#card-number {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    width: 100%;
    height: 75%;
}

#card-holder {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    width: 100%;
    height: 65%;
}

#exp{
    grid-row: 3 / span 1;
    grid-column: 2 / span 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#exp-text{
    grid-column: 1 / span 2;
    grid-row: 1/ span 1;
}

#month {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    width: 90%;
    height: 95%;
}

#year {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    width: 90%;
    height: 95%;
}

#back-card {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    z-index: 1;
    background-color: lightgray;
    border-radius: 3%;
    padding: 10px 0;
}

#bar {
    height: 20px;
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    background-color: black;
}

#cvv {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    width: 60%;
    justify-self: center;
    height: 50%;
}

#submit {
    grid-column: 3 / span 1;
    grid-row: 4 / span 1;
}