Duplicate styles in css after compiling from scss - adobe AEM

Question

I'm working with optimizing the site. We are on Adobe AEM and using scss.

When the code compiles into the site.css, there are duplicate styles in the css style sheet. I need to merge these but when I look into the individual scss style sheets, I don't see any duplicates. I do see @extend(ing) the header from the main base file.

Here is an example of the duplicate in the site.css Note, the styles here are not together in a sheet. For example, .adspaceteaser and styles related to that are in its own scss and .homebanner and styles related to that are in its own scss.

From site.css 
@media (min-width: 375px) {
 .adspaceteaser
 .cmp-adSpace-container
 .cmp-adSpace-text
 .cmp-adSpace-title
 .cmp-adSpace-title_v3,
 .cmp-herobanner .herobanner-content .herobanner-title,
 .h1,
 .h1-style,
 .heading1,
 .homebanner .cmp-homebanner .homebanner-content .banner-title,
 h1 {
 font-size: 38px;
 }
}
@media (min-width: 375px) {
 .adspaceteaser
 .cmp-adSpace-container
 .cmp-adSpace-text
 .cmp-adSpace-title
 .cmp-adSpace-title_v3,
 .cmp-herobanner .herobanner-content .herobanner-title,
 .h1,
 .h1-style,
 .heading1,
 .homebanner .cmp-homebanner .homebanner-content .banner-title,
 h1 {
 line-height: 41px;
 }
}

What I'm noticing is that where this duplicate occurs, inside the individual style sheets, there is an @extend. I'm wondering if that has something to do with this or could it be the compiler?

Thank you for any insight.

• Rene van den Berg: This is probably because of the @extend. It would be helpful if you could show the code of that 'header' that is getting extended.