checkout.css

* {
 box-sizing: border-box;
 font-size: 100%;
}

body {
 background: #ab91bd;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: 'Poppins', sans-serif;
}

.checkout-card {
 background: white;
 max-width: 750px;
 height: 800px;
 padding: 6%;
 box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
}

.checkout-card .title span {
 color: #77bfc9;
}

.checkout-card .title p {
 font-size: 30px;
 text-align: center;
}

.price-container {
 display: flex;
 gap: 15px;
}

.price-card {
 position: relative;
 padding: 2em 0.5em 1em 0;
 width: 100%;
 display: flex;
 gap: 2%;
 cursor: pointer;
}

.price-card label {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 border-radius: 3px;
 border: 1px solid #bcbcbc;
 cursor: pointer;
 font-weight: bold;
}

.price-card .content {
 display: flex;
 flex-direction: column;
}

.price-card img {
 width: 100%;
}

.input-field {
 flex-direction: column;
 margin-top: 20px;
}

.input-field input {
 padding: .75rem;
 border-radius: 3px;
 width: 100%;
 border: 1px solid #9EA0A9;
}

.grid {
 display: flex;
 gap: 10px;
 margin-top: .5rem;
}

.btn {
 width: 100px;
 margin-top: 10px;
 padding: 5px;
 font-size: 15px;
 text-align: center;
 color: #ffffff;
 background-color: #70b8ce;
 box-shadow: 0 2px 4px #008080;
 border-radius: 5px;
 border: none;
 position: relative;
 cursor: pointer;
}

.btn:hover {
 background: #506dc7;
}