.market {
    &.items {
        .sell-item {
            display: flex;
            gap: 1rem;

            @include media-breakpoint-down(lg) {
                flex-direction: column;

                .warehouse {
                    justify-content: center;
                }
            }

            @include media-breakpoint-down(md) {
                .warehouse {
                    flex-wrap: wrap;
                    justify-content: center;
                }
            }
        }

        .item {
            flex: 1;
        }

        .product {
            &-name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .card-body {
                position: relative;
            }

            &-image {
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 1rem;
                flex-grow: 1;

                img {
                    max-height: 100px;
                }
            }

            &-price {
                font-weight: bold;
                text-align: center;
                margin-bottom: 1rem;

                span {
                    color: $danger;
                }
            }

            &-expire {
                font-size: .7rem;
                position: absolute;
                right: .5rem;
                bottom: .2rem;
            }
        }
    }

    &.accounts {
        .characters {
            .character {
                border: 1px solid $gray-300;
                border-radius: $border-radius;
                padding: .2rem;
            }
        }

        .price {
            font-weight: bold;
            text-align: center;
            margin-top: 1rem;
            font-size: 1.2rem;

            span {
                color: $danger;
            }
        }
    }

    &.direct {
        .sell-item {
            display: flex;
            gap: 1rem;

            @include media-breakpoint-down(lg) {
                flex-direction: column;

                .warehouse {
                    justify-content: center;
                }
            }

            @include media-breakpoint-down(md) {
                .warehouse {
                    flex-wrap: wrap;
                    justify-content: center;
                }
            }
        }

        .item {
            flex: 1;
        }
    }
}