In this video.
Let's go ahead and then style the images to have something like this.
So let's start with the mobile first.
So I'm going to reduce the browser width and here we go.
So first step is let's target the container when I be docked works does container and for this display
as flat and flex direction to the column.
Then after that a line items to be center and then the width of it has 100% and the height also adds
hundred percent and padding as zero and then ten works.
Remember, the image is inside the work item and then the image.
So our target, the works dash item and then the image and give it a width of 100% and height also as
100%.
So let's save it.
And this is what we have.
We can see that we are done on mobile.
We are done with it.
You can see how cool is it and you can see that for the final one.
We have some Hoover Effect as that.
So let's select the works.
And then on Hoover, this is what we want to do.
I want to add border of one piece of solid.
So let's add transform property and for transform you want to scale it as 1.1 and transition is going
to be all 0.56 is and cursor to be pointer.
So now let's have a look.
You can see that I have these cool effects if I move my mouse on it.
So what has left is on desktop.
On desktop, I want to have a to be a form of grid, not something like this one.
So let's finish up quickly here and let's add the media query as we did before.
So here are going to be the media query.
And here asks me dear.
And then you pass in the main dash with and you're going to be seven, six, eight episodes.
So on desktop you want to change the direction of the work place to use row.
So we insert here, let's go ahead and then select the works.
Dice lists, dice container, and then for this display to flex.
So with this one, let's have a look and you can see that it is moving from left to right.
Next step is let's add flex wrap to wrap.
Then let's add justify contain to be center and then align items to be center.
Now this what?
We have something like this one, but let's go ahead and then reduce the width of this item here so
that it will move from left to right.
Great.
So let's go ahead and then select the works item and then we are going to change the width to 30%.
So with this one, let's have a look.
We have something like this.
And on mobile, this is what we have.
Let me show you.
It's nice on desktop, this is what we have, but let's add some spacing around the item.
So here we go.
Inside the works item here, let's add margin to ten pixels and this is what we have.
Everything looks nice.