Page Breaker customization

Site URL: https://sponge-marigold-3pbn.squarespace.com/config/design/custom-css

Hi there, 

I've applied this code

.page-section:not(.has-background) {
  .section-background {
    overflow: visible;
  }
  .section-background:after {
    content: '';
    position: absolute;
    left: calc(~"50% - 20px");
    bottom: -20px;
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: inherit;
    transform: rotate(45deg);
  }
}

To get a overlapping central triangle on my page sections, however it's also applied to the very first and last section which I don't want it to which is making it look weird. the other sections are fine but I just don't want it to apply to the first and last - please help? Please see the images attached 

Whats the password?

You could probably add :not(first-of-type) and :not(last-of-type), but without seeing the page I can't be 100% sure.

.page-section:not(.has-background) .section-background {
    overflow: visible;
}

.page-section:not(.has-background):not(:first-of-type):not(:last-of-type) .section-background::after {
    content: '';
    position: absolute;
    left: calc(50% - 20px);
    bottom: -20px;
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: inherit;
    transform: rotate(45deg);
}

Thank you so much! It worked!