@use '../consts.scss' as consts;
@use '../mixins.scss' as mixins;

.productPreview {
    display: flex;
    flex-direction: column;
    row-gap: consts.$gap-base;

    & > .imageWrapper {
        position: relative;
        overflow: hidden;

        $circle-size: 80px;
        &::before {
            @include mixins.circle-base($circle-size);
            right: calc(($circle-size/2) * -1); 
        }

        & > .image img {
            width: 310px;
            height: 465px;
            object-fit: cover;
           
            @include mixins.media(lg) {
                width: 232px;
                height: 348px;
            }

            @include mixins.media(md) {
                width: 162px;
                height: 243px;
            }

            @include mixins.media(sm) {
                width: 163px;
                height: 244px;
            }
        }

        
    }
    & > .content {
        display: flex;
        flex-direction: column;
        row-gap: consts.$gap-tiny;
        color: consts.$schema-text;
        text-align: center;

        & > .title {
            @include mixins.lineClamp(2);
            @include mixins.text('text-4');
            height: 1.17em * 2;
            color: inherit;
            text-decoration: none
        }

        & > .price {
            @include mixins.text('text-4-bold');
        }
    }
}