@media (min-width:0) {
  .marlon {
    grid-row: 1;
    grid-column: 1/span 2;
  }

  .crusaders {
    grid-row: 2;
    grid-column: 1/span 2;
  }

  .matchis {
    grid-row: 3;
    grid-column: 1/span 2;
  }
}

@media (min-width:768px) {
  .marlon {
    grid-row: 2/span 2;
    grid-column: 1/span 3;
  }

  .crusaders {
    grid-row: 1;
    grid-column: 1/span 2;
  }

  .matchis {
    grid-row: 1;
    grid-column: 3/span 2;
  }
}

@media (min-width:980px) {
  .marlon {
    grid-column: 3/-1;
  }

  .crusaders {
    grid-row: 2;
    grid-column: 1/span 2;
  }

  .matchis {
    grid-row: 3;
    grid-column: 1/span 2;
  }
}

@media (min-width:1350px) {
  .marlon {
    grid-column: 3/span 5;
  }
}