header-component.css

.header-component {
    --header-size: 150px;
    --background-size: 250px;
  
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    z-index: 1000;
   
    /*background-color: #282828;*/
    background-image: linear-gradient(5deg, rgb(7 75 56 / 80%), rgb(100 41 2 / 80%)), url('images/site_header_bg2.png');
/*     background-image: linear-gradient(5deg, rgb(91 126 158 / 80%), rgb(3 22 25)), url(images/site_header_bg2.png); */
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    color: white;

    -webkit-mask-image: -webkit-radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .9) 70%); 
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .9) 70%); 
}

.hc-img {
    height: var(--header-size);
    width: var(--header-size);
    
    border-radius: 30%;
    background-position: -45px 0;
    background-size: var(--background-size);
    background-image: url('images/site_header_img.jpg');
    box-shadow: inset 0px 0px 0px 10px rgba(0, 0, 0, .4); 
}

.hc-description {
    max-width: fit-content;
    flex: 1 0;
}

.hc-owner-name {
    -webkit-mask-image: -webkit-radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .5) 80%); 
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .5) 80%); 
}

.hc-company-name {
    -webkit-mask-image: -webkit-radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .5) 70%); 
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .5) 70%); 
}

.hc-site-description {
    color: #b0b0b0;
    color: #d5d5d5;
    -webkit-mask-image: -webkit-radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .5) 70%); 
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .5) 70%); 
}


@media (max-width: 425px) {
    .header-component {
        --header-size: 110px;
        --background-size: 210px;
    }

    .hc-owner-name, .hc-company-name {
        font-size: 18px;
    }

    .hc-site-description {
        font-size: 12px;
    }
}