.PriceCard {
    width: 100%;
    display: grid;
    transition: 150ms;
    grid-template-rows: auto 1fr auto;
    max-height: 400px;
    opacity: 1;

    &.deleting {
        max-height: 0;
        opacity: 0;
    }

    & > header {
        color: var(--color-white);
        display: flex;
        justify-content: space-between;
        align-items: center;

        & > .name-price {
            display: flex;
            gap: .5rem;

            & > span:nth-child(2)::before {
                content: '•';
                margin-right: .5rem;
                opacity: .5;
            }
        }

        & > .Button {
            color: var(--color-white);
        }
    }

    & .wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 1rem;
        justify-content: space-between;
        padding-top: 0;

        & > * {
            flex-basis: 10%;
            flex-grow: 0;
        }

        & > .info {
            color: var(--color-white);
            align-items: center;
            gap: .25rem;

            & > .icon {
                font-size: 2rem;
                padding: .2rem;
            }

            & > .price {
                display: flex;
                align-items: center;
                gap: .5rem;
            }

            & > .pro {
                font-size: .6rem;
                font-weight: bold;
            }
        }
    }
}