Response page using CSS Grid

Hello friends. I'm new to the front end. I had some difficulties in carrying out this project.

My main difficulties were: 1 - Overlay the view icon over the main image, I made the code below but I couldn't resize the icon (svg) without making changes to the background-color. Since the card__image--hover was positioned absolutely relative to the div card__images. 2- Align the main/container card to the middle of the page

    .card__images {
        position: relative;
        width: 100%;
        grid-column: 2 span;
    }
    
    .card__image {
        width: 100%;
        border-radius: 16px;
    }
    
    .card__image--hover {
        display: none;
    }
    /* img.card__image:hover+img.card__image--hover {
        position: absolute;
        display: block;
        opacity: 0.5;
        height: 100%;
        top: 50px;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 200px 200px;
        z-index: 1;
        background-color: hsl(178, 100%, 50%);
    }
     */
   

I accept any kind of feedback, thanks for your attention.