@charset "utf-8";
/* CSS Document */

.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: 
  "main sidebar"
  "footer footer";
  grid-template-columns: 70% 30%;
  grid-template-rows: auto auto;
}

.main {
	display: inline-block;
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
	text-align: center;
}
/*---------------------*/
.maingrid {
	display: grid;
  width: 100%;
  height: auto;
  grid-template-areas: "main-header main-header"
  "main-text main-foto";
  grid-template-columns: 70% 30%;
  grid-template-rows: auto auto;
}


.main-header {
  grid-area: main-header;
}
.main-text {
  grid-area: main-text;
}
.main-foto {
  grid-area: main-foto;
}


.main-header{
	grid-area: main-header;
}
.main-text {
  grid-area: main-text;
}
.main-foto {
  grid-area: main-foto;
}


.main-text {	
	
  grid-area: main-text;
}
.main-foto {
	
  grid-area: main-foto;
}
/*---------------------*/
.container2 {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-areas: "main-text2 main-foto2";
  grid-template-columns: 70% 30%;
  grid-template-rows: auto;
}

.main-text2 {
  grid-area: main-text2;
}
.main-foto2 {
  grid-area: main-foto2;
}
/*---------------*/
.maim-magazin {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-areas: "main-magazin-text main-magazin-foto";
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
}

.main-magazin-text {
  grid-area: main-magazin-text;
}
.main-magazin-foto {
  grid-area: main-magazin-foto;
}



/*----------------------*/
.main-box-auto {
  display: grid;
  margin: 20px auto;
	padding: 30px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-rows: minmax(150px, auto);
 grid-gap: 30px;
}
@supports (display: grid) {
  .main-box-auto > * {
    margin: 0;
  }
}
/*---------------------*/
.article {
   box-shadow: inset 0 0.1em 1em 0.1em #808080; line-height:1.5; margin:1em;
	display: block;
	text-align: center;
	padding: 1em 0;
}

	

.archive {
   display: grid;
  margin: 20px auto;
	padding: 30px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: minmax(150px, auto);
 grid-gap: 30px;
}