@import url("https://fonts.googleapis.com/css?family=Bangers");

body{
  overflow: hidden;
}
.container {
  position: relative;
  max-width: 100vw;
  height: 100vh;
  display: grid;
  box-sizing: border-box !important;
  background-color: #456fa0;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 1em;
 
 }

.item {
  position: relative;
  display: inline-block;
  min-height: 29.333333333333333333333333333333vh;
  width: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*** Images With Color Fallbacks ***/
.item:nth-child(1) {
  background-color: #e74c3c;
  background-image: url(../img/e112f875d7f05db887f3d7750474fb1a.jpg);
  background-position: center top;
}

.item:nth-child(2) {
  background-color: #3498db;
  background-image: url(../img/4528554-amazing_spider-man_vol_3_19.1_ponsor_variant_textless.jpg);
  background-position: center 35%;
}

.item:nth-child(3) {
  background-color: #bdc3c7;
  background-image: url(../img/Black-Panther-Avengers-Marvel-Comics-h427.jpg);
  background-position: center 20%;
}

.item:nth-child(4) {
  background-color: #2c3e50;
  background-image: url(../img/The-incredible-hulk-art-12.jpg);
}

.item:nth-child(5) {
  background-color: #2c3e50;
  background-image: url(../img/1542053976-stanleefol5.png);
  background-position: center 1.5625vw;
}

.item:nth-child(6) {
  background-color: #27ae60;
  background-image: url(../img/fantastic-four-comic-2.jpg);
  background-position: 50% 25%;
}

.item:nth-child(7) {
  background-color: #f1c40f;
  background-image: url(../img/rogues-thor-01.jpg);
  background-position: left 27%;
}

.item:nth-child(8) {
  background-color: #2980b9;
  background-image: url(../img/x-men-1-cover.jpg);
  background-position: center 22%;
}

/*** Grid Set Up ***/
@supports (display: grid) {
  .item {
    width: auto;
    min-height: 29.333333333333333333333333333333vh;
  }

  .item:nth-child(1) {
    grid-column: 1 / span 1;
    grid-row: 1 / 20;
    -webkit-clip-path: polygon(0 0, 80% 0, 100% 76.5%, 0 100%);
    clip-path: polygon(0 0, 80% 0, 100% 76.5%, 0 100%);
    margin-bottom: -10.108695652173912vh;
  }

  .item:nth-child(2) {
    grid-column: 2 / span 1;
    grid-row: 1 / 20;
    -webkit-clip-path: polygon(0 0, 100% 0, 75% 80%, 15.5% 100%);
    clip-path: polygon(0 0, 100% 0, 75% 80%, 15.5% 100%);
    margin-left: -21%;
    margin-right: -5%;
  }

  .item:nth-child(3) {
    grid-column: 3 / span 1;
    grid-row: 1 / 20;
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 53%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 53%);
    margin-left: -28%;
    margin-bottom: -16.304347826086957vh;
  }

  .item:nth-child(4) {
    grid-column: 1 / span 1;
    grid-row: 20 / 40;
    -webkit-clip-path: polygon(0 22.5%, 100% 0, 100% 77.5%, 0 100%);
    clip-path: polygon(0 22.5%, 100% 0, 100% 77.5%, 0 100%);
    margin-top: -0.5434782608695652vh;
    margin-bottom: -10.108695652173912vh;
  }

  .item:nth-child(5) {
    grid-column: 2 / span 1;
    grid-row: 20 / 40;
    -webkit-clip-path: polygon(0 13%, 74% 0, 100% 9.25%, 100% 100%, 0 100%);
    clip-path: polygon(0 13%, 74% 0, 100% 9.25%, 100% 82%, 65% 100%, 0 82%);
    margin-top: -7.282608695652174vh;
    margin-left: -1%;
    margin-bottom: -9.347826086956522vh;
  }

  .item:nth-child(6) {
    grid-column: 3 / span 1;
    grid-row: 20 / 40;
    -webkit-clip-path: polygon(0 0, 100% 34.5%, 100% 100%, 0 68.5%);
    clip-path: polygon(0 0, 100% 34.5%, 100% 100%, 0 68.5%);
    margin-left: -1%;
    margin-top: -2.1739130434782608vh;
    margin-bottom: -16.304347826086957vh;
  }

  .item:nth-child(7) {
    grid-column: 1 / 3;
    grid-row: 40 / 60;
    -webkit-clip-path: polygon(0 30%, 49% 0, 75% 38%, 34% 100%, 0 100%);
    clip-path: polygon(0 30%, 49% 0, 82% 27%, 34% 100%, 0 100%);
    margin-top: -0.7608695652173914vh;
  }

  .item:nth-child(8) {
    grid-column: 2 / span 2;
    grid-row: 40 / 60;
    -webkit-clip-path: polygon(0 100%, 57% 0, 100% 48%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 57% 0, 100% 48%, 100% 100%, 0 100%);
    margin-left: -15%;
    margin-top: -0.7608695652173914vh;
  }
}
/*** Floating Text ***/
.text-box {
  position: fixed;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.text {
  display: block;
  text-align: center;
  color: whitesmoke;
  text-shadow: 0px 3px 15px orange;
  font-family: 'Bangers', cursive;
  font-size: 3.5vmax;
}