.checkout-page {
    display: flex;
    margin: 1em;
}

.checkout-page main {
    flex: 4;
    box-shadow: 2px 2px 16px grey;
    padding: .5em 1em;
    border-radius: 10px;
}

.checkout-page aside {
    flex: 1;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-header {
    display: flex;
    justify-content: space-between;
}

.checkout-container p {
    display: flex;
    justify-content: space-between;
}

.checkout-container p {
    display: flex;
    justify-content: space-between;
    border: 2px solid lightgrey;
    border-radius: 5px;
}

.checkout-container .total {
    background-color: lavender;
}

.checkout-container button {
    width: 100%;
    text-align: center;
}


/* end aside section */


/* begin main secton */

.inner-container {
    display: flex;
    flex: 90%;
    justify-content: space-between;
    align-items: center;
    border: 2px solid lightgrey;
    padding: .5em;
    border-radius: 10px;
    margin: .5em 0;
}

.sub-inner-container {
    flex: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: .5em 0;
}

.product {
    display: flex;
    align-items: center;
    flex: 1;
}

.product img {
    height: 5em;
    width: 5em;
    margin-right: .5em;
}

.price-container {
    margin-right: .25em;
}

.price-container .prodt-price {
    color: grey;
}

.price-container .sub-container {
    position: relative;
}

.price-container .sub-container span {
    margin: .5em;
}

.price-container .percentage-disc {
    position: absolute;
    background-color: blueviolet;
    color: white;
    padding: 0.25em 0.5em;
    border-radius: 2.5px;
    font-size: x-small;
    top: 0;
    right: 0;
    margin .5em;
}

.quantity-container {
    display: flex;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 5px;
    background-color: whitesmoke;
    margin-left: .25em;
}

.quantity-container div {
    padding: .25em;
    width: 1.5em;
    height: auto;
    text-align: center;
}

.quantity-container .add-qty,
.quantity-container .sub-qty {
    cursor: pointer;
    background-color: rgba(253, 33, 202, .25);
}

.quantity-container .add-qty:hover,
.quantity-container .sub-qty:hover {
    background-color: rgba(253, 33, 202, .75);
}

.quantity-container .add-qty {
    border-radius: 0 5px 5px 0;
}

.quantity-container .sub-qty {
    border-radius: 5px 0 0 5px;
}


/* begin tablet view */

@media screen and (max-width:992px) {
    .checkout-page {
        flex-direction: column;
    }
    aside {
        display: flex;
        justify-content: space-between;
    }
}


/* begin mobile view */

@media screen and (max-width:600px) {
    aside {
        flex-direction: column;
    }
    .inner-container {
        flex-direction: column;
        align-items: unset;
    }
    .sub-inner-container {
        justify-content: space-between;
    }
    .btn-container {
        margin-bottom: .25em;
    }
}