Trouble with media query - html

Question

I'm trying out frontend mentor projects and I'm having trouble serving a picture of different viewport size(for desktop) and I don't know what's wrong, I used the picture element and declared at what width the picture should be served but it doesn't work.
The confusing aspect is that flexbox and grid display properties don't have much effect. The small mobile image doesn't get replaced with the desktop one.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
\*::before,
\*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
min-height: 100vh;
background-color: hsl(30, 38%, 92%);
}
main.background {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
background-color: hsl(30, 38%, 92%);
article.card-body {
display: flex;
background-color: #fff;
flex-direction: column;
max-width: 346px;
border-radius: 10px;
section.card-details {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 25px;
picture.image-container {
width: 346px;
height: 243px;
border-radius: 10px;
}
header.title {
color: hsl(228, 12%, 48%);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 5px;
margin-bottom: 13px;
margin-left: -5px;
margin-top: -3px;
transform: scale(0.9);
}
h1.title-detail {
color: hsl(212, 21%, 14%);
font-family: 'Fraunces', serif;
font-size: 34px;
line-height: 1;
font-weight: 700;
margin-bottom: 17px;
}
}
}
}
p.section-detail {
font-family: 'Montserrat', sans-serif;
color: hsl(228, 12%, 48%);
font-size: 13px;
line-height: 1.6;
margin-bottom: 29px;
}
h2.price {
display: flex;
flex-direction: row;
font-family: 'Fraunces', sans-serif;
color: hsl(158, 36%, 37%);
font-size: 32px;
font-weight: 900;
margin-bottom: 20px;
}
h2.price::after {
content: '$169.99';
display: flex;
flex-direction: row;
align-self: center;
color: hsl(228, 12%, 48%);
font-size: 11px;
font-family: 'Fraunces', sans-serif;
font-weight: 300;
padding-left: 23px;
text-decoration: line-through;
}
img.perfume-image {
object-fit: contain;
width: 346px;
height: 243px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
img.cart-icon {
margin-left: -15px;
}
button.add-to-cart {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
background-color: hsl(158, 36%, 37%);
color: #fff;
width: 298px;
height: 50px;
border: none;
border-radius: 5px;
}
button.add-to-cart:hover {
background-color: hsl(158, 36%, 13%);
cursor: pointer;
}
span.btn-text {
padding-left: 15px;
}
footer.challenge-userinfo {
display: flex;
align-self: flex-end;
div.attribution {
background-color: #fff;
text-align: center;
width: 100%;
font-size: 11px;
text-align: center;
}
div.attribution a {
color: hsl(228, 45%, 44%);
text-decoration: none;
}
}
#media (min-width: 800px) {
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
article.card-body {
display: flex;
flex-direction: row;
min-width: 616px;
}
picture-image-container {
display: flex;
flex-direction: row;
}
.card-details {
width: 308px;
}
}
<main class="background">
<img src="./images/image-product-mobile.jpg" alt="perfume"> PERFUME
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<h2>$149.99</h2>
<img src="./images/icon-cart.svg" alt="cart">Add to Cart Challenge by Frontend Mentor. Coded by David Bayode.
I tried using messing with the min and max-widths to see if it's the width misbehaving.

Answer 1

Found the solution, my nested scss styles had a high specificity that prevented media queries from being triggered.