commerce/src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss

@import "../../../../../styles/_utilities";

.recipesItem {
    @apply flex justify-between;
    margin: 1.5rem 0;

    @screen md{
        @apply block;
    }

    .recipesItemImage {
        @apply transition-all duration-200;
        width: 31%;
        img {
            @apply block object-cover;
            width: 100%;
            min-height: 12.5rem;
            border-radius: 1.5rem;
        }

        @screen md {
            @apply object-cover cursor-pointer;
            width: 100%;
            margin: 0 auto;
            img{
                height:100%;
                border-radius: 2.4rem;
            }
        }
    }
    .recipesItemText {
        width: 65%;
        .recipesItemName{
            @apply topline;

            display: -webkit-box;
            -webkit-line-clamp: 2;
             overflow: hidden;
            -webkit-box-orient: vertical;

            font-feature-settings: "salt" on;
            cursor: pointer;
            font-weight:bold;
            color:var(--text-active);
            margin-bottom: 1rem;

            &:hover {
                color: var(--primary);
            }
        }
        @screen md {
            width: 100%;
        }
    }

    .recipesItemDescription{
        color:var(--text-label);
        display: -webkit-box;
        -webkit-line-clamp: 2;
         overflow: hidden;
        -webkit-box-orient: vertical;
    }
 
}