body {
  
}
.kontejner {
  max-width: 1180px;
  margin: 0 auto;
}
article {
  padding: 1em;
  margin-bottom: 20px;
}
header,
footer {
  background-color: #421953;
  padding: 1em;
  margin-bottom: 20px;
  height: 60px;
}
.content {
  width: calc(1000vw -40);
  height: 180px;
  background-color: #F9A134;
  padding: 1em;
  margin-bottom: 20px;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}
.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: auto;
  grid-gap: 20px;
  grid-template-areas: "left-half right-half";
}
.half-left {
  grid-area: left-half;
  background-color: #F26531;
  padding: 2em;
}
.half-right {
  grid-area: right-half;
  background-color: #F26531;
  padding: 2em;
}
.grid-wrapper-equal-thirds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  grid-template-rows: auto auto ;
  grid-gap: 20px;
  grid-template-areas: "left-third middle-third right-third";
}
.grid-wrapper-equal-fourths {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
  grid-template-rows: auto auto auto auto ;
  grid-column-gap: 20px;
  grid-template-areas: "one-fourth" "one-fourth" "one-fourth" "one-fourth";
}
.one-fourth {
  background-color: #efefef;
  padding: 1em;
  margin: 0 0 20px 0 !important;
}
.left-third, .middle-third, .right-third {
  background-color: #efefef;
  padding: 2em;
  margin-bottom: 0;
}
.grid-wrapper-two-thirds {
  display: grid;
  grid-template-columns: 
    66% 1fr;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  grid-template-areas: "left-two-thirds right-one-third";
}
.left-two-thirds, .right-one-third {
  background-color: #414141;
  padding: 1em;
  margin-bottom: 0;
  padding: 2em;
}

.grid-wrapper-right-two-thirds {
  display: grid;
  grid-template-columns: 
    1fr 66%;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  grid-template-areas: "left-one-third right-two-thirds";
}
.left-one-third, .right-two-thirds {
  background-color:  #efefef  ;
  padding: 1em;
  margin-bottom: 0;
  padding: 2em;
}

@media screen and (max-width: 700px) {
	.grid-wrapper {
    display: block;
	}
  .left-half, .right-half {
    margin: 0px;
  }
	.grid-wrapper-equal-thirds {
      display: block;
	}
  .left-third, .middle-third, .right-third  {
    margin: 0 0 20px 0 ;
  }
  .grid-wrapper-two-thirds {
    display: block;
  }
  .left-two-thirds, .right-one-third    {
    margin-bottom: 20px;
  }
  .grid-wrapper-right-two-thirds {
    display: block;
	}
  .left-one-third , .right-two-thirds {
    margin-bottom: 20px;
  }
  .grid-wrapper-equal-fourths {
    display: block;
	}
}