/* CSS Datei zu Article Blog Simple  */
/* Copyright (c) 2021 Reto Tröndle */

/*! Variablen, Konstanten */
 :root {
	--ArticleSimple-max-width: 480px;
	--grid-1cols: 'item1' 'item2';
	--grid-2cols: 'item1 item1 item2 item2';
	--grid_3cols: 'item1 item1 item2 item2';
 }


/* Standard = Vertikale Darstellung, mobile first */
.articleGrid {
	display: grid;
	grid-template-areas: var(--grid-1cols);
	justify-content: space-evenly;
	grid-gap:  0px;
	grid-template-columns: 1fr;
}
.articleGrid2 {
	display: grid;
	grid-template-areas: var(--grid2-1cols);
	justify-content: space-evenly;
	grid-gap:  0px;
	grid-template-columns: 1fr;
}
.articleSimpleContainer {
	background-color:  rgba(44, 43, 57, 1);
	min-width: 0px;
	max-width: var(--ArticleSimple-max-width);
	position: static;
	margin-bottom: 10px;
}

.artcileSimpleImageContainer {
	width: 100%;
	position: relative;
	max-width: 480px;
}
.articleSimpleImage {
	width: 100%;
	max-height: 450px;
	object-fit: cover;
	object-position: center;					 
}
.articleSimpleTextContainer {
	position: static;						
	background-color: rgba(44, 43, 57, 1) ;
	width: 100%;
	transform: none;						   
}
.articleSimpleTextMargin {
   margin: 0.5em 1em 1em 1em;
 }
 .articleSimpleTitleContainer {
	position: absolute;
	margin: 0px;
	bottom: 0;
	width: 95%;
	right: 50%;
	transform: translatex(50%);
	background-color: rgba(44, 43, 57, 1);
	text-align: center;
}
.articleTitle {
	margin: 0.2em 0 0.3em 0;
}
.TitleOverImg {
	display: inline !important;
}
.TitleInline {
	display: none !important;
}
.articleSimpleButtonContainer {
	position: static;
	background-color: rgba(255,255,255,1);
	margin-top: 1em;
	transform: none;
	width: 95%;
}
.btn-simpleText{
	box-shadow: none;
	background-color: unset;
	width: 100%;
	padding: 0px;
	border-color: black;
	border-style: solid;
	border-width: medium;
}
/* Horizontale Darstellung ab gegebener Bildschirmbereite */
@media (min-width: calc(3*480px + 20px)) {
  .articleGrid {
	grid-template-areas: var(--grid-2cols);
	grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .articleGrid2 {
	grid-template-areas: var(--grid2-2cols);
	grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: calc(4*480px + 20px)) {
  .articleGrid {
	grid-template-areas: var(--grid_3cols);
	grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .articleGrid2 {
	grid-template-areas: var(--grid2_3cols);
	grid-template-columns:  1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 480px) {
  .articleGrid {
	grid-gap: 10px;
  }
  .articleGrid2 {
	grid-gap: 10px;
  }
  .articleSimpleContainer {
  	position: relative;
  	min-width: 0px;
  	flex: 1;
	max-width: 700px;
	background-color: var(--background-color);
	margin-bottom: 0px;
  }
  .artcileSimpleImageContainer {
	max-width: 480px;
}
  .articleSimpleTextContainer {
  	position: absolute;
	width: 60%;
	top: 50%;
	right: 0px;
	transform: translate(0, -50%);
	height: 95%;
  	background: linear-gradient(to right, rgba(44, 43, 57, 0.5) 0% ,rgba(44, 43, 57, 0.6) 2%, rgba(44, 43, 57, 0.7) 3%, rgba(44, 43, 57, 0.8) 5%, rgb(44, 43, 57) 7%);
  }
  .articleSimpleTextMargin {
     margin: 1em;
  }
  .articleSimpleTitleContainer {
    position: static;
    transform: none;
    width: 100%;
    background: linear-gradient(to right, rgba(44, 43, 57, 0.5) 0% ,rgba(44, 43, 57, 0.6) 2%, rgba(44, 43, 57, 0.7) 3%, rgba(44, 43, 57, 0.8) 5%, rgb(44, 43, 57) 7%);  
  }
  .articleTitle {
	margin: 0;
  }
  .TitleOverImg {
	display: none !important;
  }
  .TitleInline {
	display: inline !important;
  }
  .articleSimpleButtonContainer {
	position: absolute;
	bottom: 0;
	width: 80%;
	right: 50%;
	transform: translateX(50%);
   }
}