@import "../../bootstrap/variables";

.bundle-card {

    &__image {
        width: 192px;
        min-width: 192px;
        height: 228px;
        overflow: hidden;

        img {
            transition: all 0.4s ease;
        }
    }

    &:hover &__image img {
        transform: scale(1.1);
    }

    &__content {
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 160px;
        right: 0;
        z-index: 1;
    }

    &__title {
        max-height: 42px;
        font-weight: 700;
        line-height: 21px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .rtl & {

        .bundle-card__content {
            left: 0;
            right: 160px;
        }
    }

    @media (max-width: $screen-sm-max) {
        margin-bottom: 122px;

        &__image {
            width: 100%;
            min-width: 100%;
        }

        &__content {
            right: 16px;
            left: 16px;
            top: 170px;
            bottom: auto;
        }
    }
}