R - Quarto HTML document. How to insert logo image at the left of the Title / subtitle area

I'm trying to insert a company logo image on a HTML report generated with Quarto from RStudio. My report template is the following

---
title: "Report Title"
subtitle: "Report subtitle"
author: "Name and Sruname"
date: last-modified
date-format: "DD-MM-YYYY"
description: "Text Text Text Text Text Text Text Text "
last-modified:
title-block-banner: true
format: 
  html:
    embed-resources: true
    smooth-scroll: true
    theme: cosmo
    fontcolor: black
    toc: true
    toc-location: left
    toc-title: Summary
    toc-depth: 3
---

```{r sesPackages, results='hide', message=FALSE, warning=FALSE, echo=FALSE}    
library(tidyverse,  verbose = F, quietly = T)
library(knitr,      verbose = F, quietly = T)
library(kableExtra, verbose = F, quietly = T)
library(tinytex,    verbose = F, quietly = T)    
```

```{r qrtOptions, echo=FALSE, cache=FALSE}
opts_chunk$set(echo=FALSE,
                 cache=TRUE,
               prompt=FALSE,
               tidy=TRUE,
               comment=NA,
               message=FALSE,
               warning=FALSE,
               width=75)

knitr::opts_chunk$set(cache = FALSE)
```

# Report contents 

```{r}    
diamonds %>% 
  group_by(cut, color) %>% count() %>% 
  pivot_wider(names_from = color, values_from = n) %>% 
  rename(Cut = cut) %>% 
  kable(format.args = list(decimal.mark = ',', big.mark = "."), caption = "From Diamonds data frame") %>%
  kable_styling(bootstrap_options = c("striped", "hover", "condensed", "responsive"), full_width = T, position = "left", fixed_thead = T)
```

From the answers provided for this question Insert a logo in upper right corner of R markdown html document I've tried to follow some responses but all place the image on the ID=quarto-document-content.

The answers also provide also some simple tricks to move the image like style = 'position:absolute; top:0; right:0; padding:10px;' but do not work fine when the responsiveness of the HTML is a requirement.

There is a way (also using a custom CSS) to place an image at the left of the title saving the HTML responsiveness?

Maybe this helps? Assuming your logo is in the folder "images", here exemplatory the rstudio logo, we add a styles.css file:

.quarto-title-block .quarto-title-banner {
  background-image: url(images/rstudio_logo.png);
  background-size: 300px;
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 10px;
  background-origin: content-box;
}

And change the yaml to

---
title: "Report Title"
subtitle: "Report subtitle"
author: "Name and Sruname"
date: last-modified
date-format: "DD-MM-YYYY"
description: "Text Text Text Text Text Text Text Text "
title-block-banner: "#27445C"
format: 
  html:
    embed-resources: true
    smooth-scroll: true
    theme: cosmo
    fontcolor: black
    toc: true
    toc-location: left
    toc-title: Summary
    toc-depth: 3
css: styles.css
---

Output: