Sass style is not applying to content - html

Question

my SASS style is not being applied when I nest them. I don't understand why, they work perfectly when not nested. I've never encountered this issue before and it seems strange that it would not apply the styling this one time. It also works when I remove the :nth-of-type(1) portion. I find this a bit odd, since I specifically need to divide it with for this one "shop-sec" and others. Thank you.
.shop-sec:nth-of-type(1) {
height: 500px auto;
background-color: white;
margin-top: 75px;
display: grid;
position: relative;
grid-template-columns: .75fr 1.25fr 1.25fr .75fr;
grid-gap: 15px;
.shop-sec-content {
width: 100%;
height: 100%;
}
.shop-sec-content img {
width: 100%;
height: auto;
}
.shop-sec-content:nth-of-type(1) {
position: relative;
}
.shop-sec-content:nth-of-type(1) .shop-sec-text {
position: absolute;
right: 0;
padding-right: 50px;
transform: rotate(-90deg);
top: 42.5%;
font-size: 20px;
font-weight: bold;
}
.shop-sec-content:nth-of-type(4) {
position: relative;
}
.shop-sec-content:nth-of-type(4) .shop-sec-text {
position: absolute;
left: 0;
padding-left: 50px;
top: 42.5%;
font-size: 20px;
font-weight: bold;
}
.shop-sec-content:nth-of-type(2) {
position: relative;
}
.shop-sec-content:nth-of-type(2) .shop-sec-content-text {
position: absolute;
top: 50%;
margin-left: 50px;
font-size: 16px;
padding: 5px 20px;
color: white;
background-color: rgba(0, 0, 0, 0.507);
text-transform: uppercase;
letter-spacing: 5px;
}
.shop-sec-content:nth-of-type(2) .shop-sec-content-text span {
font-size: 24px;
font-weight: bold;
letter-spacing: 0px;
}
}
<div class="shop-sec">
<div class="shop-sec-content">
<div class="shop-sec-text">HELLO</div>
</div>
<div class="shop-sec-content">
<div class="shop-sec-content-text">NEW!<br><span>HELLO</span></div>
<img src="">
</div>
<div class="shop-sec-content">
<div class="shop-sec-content-text"></div>
<img src="">
</div>
<div class="shop-sec-content">
<div class="shop-sec-text">01</div>
</div>
</div>