Anordnung der Artikelbilder

<ul class="articleList">
	{foreach from=$objects item='article'}
		<li>
			<a href="{$article->getLink()}">
				{if $article->getTeaserImage() && $article->getTeaserImage()->hasThumbnail('tiny')}
					<div class="box128">
						<div class="articleListImage">{@$article->getTeaserImage()->getThumbnailTag('tiny')}</div>
				{/if}
					<div class="articleListContentWrapper">
						<div class="articleListImageWrapper">
							<div class="articleListHeroImage" style="background-image:url({@$article->getImage()->getThumbnailLink('medium')});"></div>
						</div>
						<div class="articleListImageWrapperFooter">
							<div class="containerHeadline">
								<h3 class="articleListTitle">{$article->getTitle()}</h3>
								<ul class="inlineList articleListMetaData">
									{if $article->hasLabels()}
										<li>
											<span class="icon icon16 fa-tags"></span>
											<ul class="labelList">
												{foreach from=$article->getLabels() item=label}
													<li><span class="label badge{if $label->getClassNames()} {$label->getClassNames()}{/if}">{lang}{$label->label}{/lang}</span></li>
												{/foreach}
											</ul>
										</li>
									{/if}


									<li>
										<span class="icon icon16 fa-clock-o"></span>
										{@$article->time|time}
									</li>


									{if $article->enableComments}
										<li>
											<span class="icon icon16 fa-comments"></span>
											{lang}wcf.article.articleComments{/lang}
										</li>
									{/if}


									{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
										<li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
											{if $article->likes || $article->dislikes}
												<span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}±{/if}{#$article->cumulativeLikes}
											{/if}
										</li>
									{/if}


									{if ARTICLE_ENABLE_VISIT_TRACKING && $article->isNew()}<li><span class="badge label newMessageBadge">{lang}wcf.message.new{/lang}</span></li>{/if}


									{if $article->isDeleted}<li><span class="badge label red">{lang}wcf.message.status.deleted{/lang}</span></li>{/if}


									{event name='articleListMetaData'}
								</ul>
							</div>
							<div class="containerContent articleListTeaser">
								{@$article->getFormattedTeaser()}
							</div>
						</div>
					</div>
				{if $article->getTeaserImage() && $article->getTeaserImage()->hasThumbnail('tiny')}
					</div>
				{/if}
				{event name='articleListEntry'}
			</a>
		</li>
	{/foreach}
</ul>

@include screen-md-up {


	.articleList {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
	}


	.articleList > li {
		width: 50%;
		padding-left: 10px;
		padding-right: 10px;
	}


	.articleList > li:not(:first-child) {
		margin-top: 30px !important;
	}


	.articleList > li:nth-child(1),
	.articleList > li:nth-child(2) {
		margin-top: 0 !important;
	}


	.articleListImageWrapper .articleListHeroImage {
		height: 300px;
		background-position: 50% 50%;
		background-size: cover;
	}


	.articleListContentWrapper {
		position: relative;
	}


	.articleListContentWrapper .articleListTeaser {
		display: none;
	}


	.articleListImageWrapperFooter {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.9) 100%);
	}


	.articleListImageWrapperFooter,
	.articleListImageWrapperFooter a,
	.articleListImageWrapperFooter a:hover,
	.articleListImageWrapperFooter .articleListMetaData,
	.articleListImageWrapperFooter .containerHeadline > h3,
	.articleList:hover .containerHeadline > h3 {
		color: #fff;
	}


	.articleListImage {
		display: none;
	}


}


@include screen-sm-down {


	.articleListHeroImage {
		display: none;
	}




}