Blog preview card challenge.

What I notice is that you have some code that is either redundant or unnecessary. Fixing or removing those parts of your css will shorten your code significantly.

For example, in this section , you don't need to put both max and min width/height when simply putting height and width will do. In addition, you grid will naturally fill the available horizontal space so you won't need width.

Before:

.card_wrapper{
    min-width: 100vw; // From this
    max-width: 100vw; // From this
    min-height: 100vh; // From this
    max-height: 100vh; // From this
    display: grid;
    justify-content: center;
    align-items: center;
}

After:

.card_wrapper{
    height: 100vh;  // To this
    display: grid;
    justify-content: center;
    align-items: center;
}

Here you can just keep the width, the container will hug the height of the contents in the container.

Before:

.card {
    background: var(--primary-color-white);
    display: grid;
    min-width: 327px; //  From this
    max-width: 327px; //  From this
    min-height: 501px; //  From this
    max-height: 501px; //  From this
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
    padding: 24px;
}

After:

.card {
    background: var(--primary-color-white);
    display: grid;
    width: 327px; //  To this
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
    padding: 24px;
}

Once you clean this up, the four lines of code setting height and width will turn to one or two lines of code. This is not every but hopefully this gives you a clear idea on what you need to fix.

Have fun coding 😊.