Using nth-child to add a color pattern to elements is only showing the first color on every element

Question

I am trying to color a list of elements in a repeating pattern of 7 colors.

This is my html structure:

<div class="row">
   <div class="col-12 col-md-6 col-lg-3">
      <a href="junior-adviseur-stikstofdepositie-5">
         <div class="vacancy">
            <div class="bottom">
               <h3>Junior adviseur stikstofdepositie</h3>
               <span class="icon-arrow-right"></span>
            </div>
         </div>
      </a>
   </div>
   <div class="col-12 col-md-6 col-lg-3">
      <a href="afdelingsmanager-energie-1">
         <div class="vacancy">
            <div class="bottom">
               <h3>Afdelingsmanager Energie</h3>
               <span class="icon-arrow-right"></span>
            </div>
         </div>
      </a>
   </div>
   <div class="col-12 col-md-6 col-lg-3">
      <a href="specialist-ruimtelijke-ontwikkeling-2">
         <div class="vacancy">
            <div class="bottom">
               <h3>Specialist Ruimtelijke Ontwikkeling</h3>
               <span class="icon-arrow-right"></span>
            </div>
         </div>
      </a>
   </div>
   <div class="col-12 col-md-6 col-lg-3">
      <a href="3d-modelleur-ontwerper-3">
         <div class="vacancy">
            <div class="bottom">
               <h3>3D Modelleur - Ontwerper</h3>
               <span class="icon-arrow-right"></span>
            </div>
         </div>
      </a>
   </div>
   <div class="col-12 col-md-6 col-lg-3">
      <a href="open-sollicitatie-afstudeerstage-4">
         <div class="vacancy">
            <div class="bottom">
               <h3>Open sollicitatie / afstudeerstage</h3>
               <span class="icon-arrow-right"></span>
            </div>
         </div>
      </a>
   </div>
</div>

Now I want to color the element .bottom.

This is how I am trying to achieve this:

#vacancyIndex {
    .bottom {
        &:nth-of-type(7n +1) {
            background: #eeaa23;
        }

        &:nth-of-type(7n +2) {
            background: #c09a2d;
        }

        &:nth-of-type(7n +3) {
            background: #75813d;
        }

        &:nth-of-type(7n +4) {
            background: #547645;
        }

        &:nth-of-type(7n +5) {
            background: #25674f;
        }

        &:nth-of-type(7n +6) {
            background: #0f5f54;
        }

        &:nth-of-type(7n +7) {
            background: #0a4940;
        }
    }
}

#vacancyIndex is the wrapper of the entire page, so it only appears once and wraps everything. I then search for the .bottom element and for every time it appears add a color until 7 then repeat.

But above code only applies the first color to all .bottom elements. Why? What am I doing wrong?