.section-cart-a {
    border-top: 3px solid var(--b2);
    border-bottom: 3px solid var(--b2);
    background: var(--c3) ;
    padding: 3rem 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 4rem;
    align-items: center;
}
.user-cart {
    grid-column: span 2 / span 2;
}
.item-lite {
    background: var(--c4) ;
    border-radius: 10px;
    border: 3px solid var(--b2);
    box-shadow: 6px 6px 0px var(--b2);
    grid-column: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 2;


}
.item-lite-info {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 5px;
    list-style: none;
    padding: 0  1rem ;
    border: 1px solid var(--b2);
    place-items: center;
    li:nth-child(1) {
        grid-column: span 3 / span 3;
        place-self: start;
        padding-left: 2rem;
    }

    li:nth-child(2) {
        grid-column-start: 4;
    }

    li:nth-child(3) {
        grid-column-start: 5;
    }

    li:nth-child(4) {
        grid-column-start: 6;
    }
}
.items {
    display: grid;
    background-color: var(--l1);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 5px;
    padding: 0.5rem ;
    place-items: center;
    border-bottom: 1px solid var(--b2);
    img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 20%;
    }
    div {
        grid-column: span 2 / span 2;
        place-self: center start;
        font-size: 2em;
    }

    span:nth-child(1) {
        grid-column-start: 4;
    }

    span:nth-child(2) {
        grid-column-start: 5;
    }

    svg {
        grid-column-start: 6;
    }

}

div.items:nth-child(even) {
background: var(--l2) ;
}


.item-total {
    grid-row: span 3 / span 3;
    grid-column-start: 3;
    grid-row-start: 1;
    background: var(--b1) ;
    border-radius: 15px;
    padding: 1rem;
    height: calc(100% - 3rem);
    border: 3px solid var(--l1);
    color: var(--c1);
}

.item-total-s {
    display: flex;
    padding: 1rem 2rem;
    flex-direction: column;
    gap: 1rem;
    li {
    border-bottom: 1px solid var(--l2);
        display: flex;
        justify-content: space-between;
    }
    span {
        color: var(--c2);
    }
    button {
        padding: 3px 9px;
        background: var(--c3);
        border-radius: 20px;
    }
    button:hover {
        background: white ;
    }
}
.t-amount {
    margin-top: 1rem;
    border: 1px dashed white;
    background: var(--l1) ;
}