<style>
	.story-content__container-hero-small {width: 100%;z-index: 2;}
	.story-single__img-hero img {
    width: 100%;
		margin-bottom: 0rem;
}
	.story-content__container-hero-small .button {margin: 0;}
	.story-single__container-hero-small a,
	.story-single__img-hero-small h2,
    .story-content__container-hero-small h2 {
		color: #fff;
		font-size: 1.25rem !important;
        font-weight: 600;
        transition: .3s;
      
	}
	.storylisting-tag__container-hero-small {
		color: #fff;
		text-transform: uppercase;
		font-size: .85rem;
	}

.story-single__container-hero-small h2::after {
    content: '';
    border-top: 1px solid #fff;
    display: block;
    margin-top: 2rem;
    padding-bottom: 1rem;
    width: 100px;
}
	div#hero-story-small::after {
    content: '';
    background: rgba(0,0,0,.4);
   /* background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); */
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    z-index: 1;
    transition: .3s;
}
	div#hero-story-small:hover::after {
    background: rgba(0,0,0,.7);
}

div#hero-story-small:hover:hover a,
	div#hero-story-small:hover:hover h2 {
		color: #45e8fd;
	}
.story-content__container-hero-small { padding-bottom: .5rem;}
@media screen and (min-width: 960px) {
		.story-single__container-hero-small {
		position: relative;
		min-height: calc(21.5vw - .5rem);
		display: block;
	}
		
		.story-single__img-hero-small img {
		width: 100%;
			margin:0;
	}
		
}
	/*******************************************************************************/

/* Hero - styles */

/*******************************************************************************/
#hero-story-small {
    width: 100%;
    height: calc(21.5vw - .5rem); 
    position: relative;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; 
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    color: #fff;
	min-height: 300px;
}






/* 1024 Pixels and Below */
@media screen and (max-width: 1023px) {
	#hero-story-small {
		background-size: cover;
		/* min-height: 21.5vw; */

	}

	
}



</style>
<template>
<div>
	<div class="story-single__container-hero-small story-single__hero-small" v-for="(newsitem, index) in model.newsitems">
	<a v-bind:href="newsitem.url.endsWith('.html') ? newsitem.url.substring(0,newsitem.url.lastIndexOf('.html')) : newsitem.url" data-dtm="stories carousel" class="stat-text-link news-link">
<div id="hero-story-small" class="max-page-width" v-bind:data-interchange="'[' + newsitem.image.replace('maxw_638', 'maxw_768') + ', small], [' + newsitem.image.replace('maxw_638', 'maxw_1024') + ', medium], [' + newsitem.image.replace('maxw_638', 'maxw_1920') + ', large]'" data-resize="hero" data-e="0assbq-e" v-bind:style="{'background-image': 'url(' + newsitem.image + ')'}" data-events="resize" data-dtm="stat-image-link">
<div class="rown story-content__container-hero-small">
		<div class="row max-page-width collapse">
			<div class="large-10 medium-10 small-10 columns small-centered medium-centered large-centered">
			<div class="rown section">
				 <div class="row collapse">
					<div class="large-18 medium-12 small-12 columns">
						<!--<div class="storylisting-tag__container-hero-small"><span v-for="tag in newsitem.tags.slice(0, 1)">
        {{newsitem.subtitle}}
    </span></div>-->
						 <h2>{{newsitem.title}}</h2>
							
								<!-- <button class="button hollow button__white stat-button-link" data-dtm="stories">Read</button> -->
					</div>
				 </div>
			  </div>
			</div>
		</div>
	</div>
 
</div>
	</a>
</div>


</div>
</template>


<script>
module.exports = {
	props: ["jsonurl", "user", "model", "pagesize", "pageindex", "limit", "isloading", "newspath"],
	methods: {
	    nextpage: function() {			
			this.$emit('nextpage', '');
		},
	    previouspage: function() {			
			this.$emit('previouspage', '');
		},
	    gotopage: function(pageindex) {			
			this.$emit('gotopage', pageindex);
		},
	    loadmore: function() {			
			this.$emit('loadmore', '');
		},
		
	  }
}
</script>

