0:00 Let's tackle step one first.

0:02 I'll scroll down to the four column divs. We only want to keep two of these, and because we already have the colors we want, I can put the 600 first, and the 500 second, and delete the other two.

0:12 If I save this, it's going to look a bit awkward. Essentially, we only have two columns now, and the second one here happens to blend with the cyan-500 background color that is applied on the top element up here. Believe me, if that was bg-cyan-600, you'd be able to see the second column here.

0:29 All right, so back to our divs. We want each of these to span across two columns, and so I can give both the class of col-span-2. Hit save, and voila. We have a perfect background split effect, working at absolutely any screen size, until the layout of the card switches to top-bottom, which is exactly what we want. Nice.

0:51 I can get rid of number one, and number two is optional. Me personally, even if this class looks absolutely horrendous, I would not create an abstraction, because right now we're only using it in one specific place, and it's very unlikely that we're going to use that again somewhere else. This will probably live in a background split component and tucked away, and I don't really care about how it looks.

1:13 If you were to reuse that, that's another story. I personally would leave it here but let me quickly do an abstraction at the CSS level to wrap up this tutorial.

1:22 I will cut this class here, and let's write a class that doesn't exist yet called background-split. You can see that now things look broken. The split is top-to-bottom, because we don't have any grid columns defined anymore, so we have a single column grid that stacks from top to bottom.

1:38 In our CSS file, let's create a new component class @layer components, and we will create this background-split class, and here I'll use @apply, and paste all of this. When I save this, the background split should be back in place.

1:54 Yep, it is.