I created an Image component and gave it height and width 100. now i want to change it size using css. but the size is not changing. it is still the 100x100 size.

the js code

import Image from 'next/image';
import styles from './header.module.css';

import {ytIconPath,searchIconPath,navigationIconPath} from '../../static/images'


export function YoutubeIcon(){
    return(
        <div className={styles.title}>
            <div className={styles.ytIcon}>
                <Image src={ytIconPath}
                    height={100}
                    width={100}
                    alt="Youtube Icon"/> 
            </div>
            YouTube
        </div>
    );
}

the css code

.title{
    color: black;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 3vw;
    font-weight: bold;
    display: flex;
    align-items: center; 
    width: 30vw;
    justify-content: space-around;
}

.ytIcon{
    height: 2vw;
}

the size is also not changing according to the viewport.