<div class="d-flex px-3 py-4 neutral-bg user-stories-wrapper">
    <div class="user-story mr-3 position-relative">
        <div class="d-flex justify-content-center align-items-center story-avatar-holder" >
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/95a4d85d7c784eaab33c55df16fc8817.jpg" class="avatar rounded-circle">
            <div class="position-absolute bg-gradient-info story-border">
                @include('elements.icon',['icon'=>'add','variant'=>'','classes'=>'text-white'])
            </div>
        </div>
        <p class="mt-2 mb-0 text-truncate">Your story</p>
    </div>

    <div class="user-story mr-3">
        <div class="user-story-avatar-holder d-flex justify-content-center align-items-center bg-gradient-faded-primary bg-gradient-faded-warning">
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/35f777324945442289697dc8b72a2c7d.jpg" class="avatar rounded-circle">
        </div>
        <p class="mt-2 mb-0 text-truncate">@zane.travel</p>
    </div>

    <div class="user-story mr-3">
        <div class="user-story-avatar-holder d-flex justify-content-center align-items-center bg-gradient-faded-primary bg-gradient-faded-warning">
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/e8983d10a2844fec9b07a264f2c3389b.jpg" class="avatar rounded-circle">
        </div>
        <p class="mt-2 mb-0 text-truncate">@zane.travel</p>
    </div>

    <div class="user-story mr-3">
        <div class="user-story-avatar-holder d-flex justify-content-center align-items-center">
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/95a4d85d7c784eaab33c55df16fc8817.jpg" class="avatar rounded-circle">
        </div>
        <p class="mt-2 mb-0 text-truncate">@zane.travel</p>
    </div>


    <div class="user-story mr-3">
        <div class="user-story-avatar-holder d-flex justify-content-center align-items-center">
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/35f777324945442289697dc8b72a2c7d.jpg" class="avatar rounded-circle">
        </div>
        <p class="mt-2 mb-0 text-truncate">@zane.travel</p>
    </div>

    <div class="user-story mr-3">
        <div class="user-story-avatar-holder d-flex justify-content-center align-items-center">
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/e8983d10a2844fec9b07a264f2c3389b.jpg" class="avatar rounded-circle">
        </div>
        <p class="mt-2 mb-0 text-truncate">@zane.travel</p>
    </div>

    <div class="user-story mr-3">
        <div class="user-story-avatar-holder d-flex justify-content-center align-items-center">
            <img src="https://just-fans-demo.s3.eu-central-1.amazonaws.com/users/avatar/35f777324945442289697dc8b72a2c7d.jpg" class="avatar rounded-circle">
        </div>
        <p class="mt-2 mb-0 text-truncate">@zane.travel</p>
    </div>

</div>
