/* ==========================================================================
   Grid
   ========================================================================== */
.container{
  /* background-image: linear-gradient(to bottom left, #9999A4 0%, #60606B 100%); */
  max-width: 1400px;
  margin: 0 auto;
}


 .row{
   width: 100%;
   display: grid;
   padding-top: 100px;
   padding-bottom: 100px;

   grid-gap: 10px;
   grid-template-columns: repeat(12, 1fr);

 }

.pay-off-wrap{
  grid-column-start: 2;
  grid-column-end: 7;
  align-self: center;
}

.pay-off{

}

.device{
  grid-column-start: 7;
  grid-column-end: 12;
}

.why-note{
  grid-column-start: 2;
  grid-column-end: 12;
}

.roadmap{
  grid-column-start: 5;
  grid-column-end: 10;
}

.octicon{
  grid-column-start: 4;
  grid-column-end: 5;
}

@media (max-width: 600px) {
  .row{
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .pay-off-wrap{
    grid-column-start: 2;
    grid-column-end: 12;
    order: 2;
  }
  .device{
    order: 1;
    grid-column-start: 2;
    grid-column-end: 12;
    margin-left: -65px;
  }
  .octicon, .roadmap{
    grid-column-start: 2;
    grid-column-end: 12;
  }
}