Converting Float to Grid

I’m trying to convert this float that has set margins to grid.

Where the spacing wouldn’t change at all.
https://jsfiddle.net/a0no52hy/2/

Where I would be able to remove all these margins from it.

.container-left-video .jacket-left {
  margin-left: 196px;
}

.container-right-video .jacket-right{
  margin-left: 196px;
}

.container-left-video .wrap-left {
  margin-left: 25px;
}

.container-right-video .wrap-right{
  margin-right: 25px;
}

And replace them with these instead.

Covers

  display: grid;
  grid-column-gap: 378px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

Videos

  display: grid;
  grid-column-gap: 34px;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto;

How would this be done?

Here is one way.

.container-top {
  display: grid;
  grid-template-columns: 196px 1fr 1fr 196px;
  align-items: center;
}

.container-left-video {
  grid-column: 2 / 3;
}

.container-right-video {
  grid-column: 3 / 4;
  justify-self: end;
}

https://jsfiddle.net/384bx60s/