@mixin organic-shape-content($svg-width, $svg-height, $line-margin-right, $line-margin-left) {
  width: 100%;
  height: 100%;  

  .content {
    width: $svg-width;
    height: $svg-height;
    font-size: clamp(12px, 4vw, 24px);
    
    .content-span {
      max-width: $svg-width;
      text-wrap: wrap;
  
      .line {
        margin-right: $line-margin-right;
        margin-left: $line-margin-left;
      }
    }
  
    &::before {
      content: "";
      height: 100%;
      width: 50%;
      float: left;
    }
  
    .content-span::before {
      content: '';
      height: 100%;
      width: 50%;
      float: right;
    }
  }
}

.organic-shapes-container {
  text-align: center;

  h1, span {
    font-size: 2.75rem;
    line-height: 2.375rem;
    display: inline;
    white-space: nowrap;
  }

  .material-symbols {
    vertical-align: top;
  }

  .line {
    border-bottom: 2px solid;
    margin: 10px 0;
  }
}

.organic-bg-green {
  color: $dark_green;
  
  #upper-shape {
    fill: $medium_green;
  }
}

.organic-bg-blue {
  color: $dark_blue;
  
  #upper-shape {
    fill: $medium_light_blue;
  }
}

.organic-bg-shapes1 {
  position: relative;
  height: 316px;
  width: 100%;
  
  svg {
    @include organic-shape-content(350px, 316px, 25%, 12%);

    .content {
      &::before {
        shape-outside: polygon(0px 0px, 84.76% 1px, 48.03% 10.99%, 28.13% 20.29%, 18.62% 29.48%, 12.94% 38.01%, 10.06% 48.47%, 13.96% 60.38%, 24.8% 70.91%, 43.06% 78.78%, 63.03% 84.23%, 79.38% 88.27%, 100.07% 91.82%, 100% 100%, 0% 100%);
      }
  
      span::before {
        shape-outside: polygon(100% 0px, -3px 9px, 25.81% 12.34%, 50.8% 22.43%, 68.12% 33.01%, 76.41% 41.1%, 82.88% 49.24%, 87.81% 58.43%, 84.09% 66.57%, 73.84% 76.57%, 57.4% 85.63%, 30.51% 91.27%, 0.68% 91.89%, 0px 100%, 100% 100%);
      } 
    }
  }

}

.organic-bg-shapes2 {
  position: relative;
  height: 402px;
  width: 100%;

  svg {
    @include organic-shape-content(332px, 402px, 23%, 14%);

    .content {
      &::before {
        shape-outside: polygon(0px 0px, 80.11% 0px, 81.35% 9.88%, 47.33% 11.52%, 27.85% 21.92%, 25.59% 31.35%, 27.5% 45.12%, 32.54% 60.85%, 39.32% 73.79%, 52.18% 83.49%, 74.67% 92.08%, 89.94% 94.78%, 101.78% 97.62%, 101.79% 100%, 0% 100%);
      }
  
      span::before {
        shape-outside: polygon(100% 0px, 2px 0px, 0.94% 8.82%, 32.97% 13.22%, 53.25% 23.91%, 66.51% 31.98%, 80.22% 42.25%, 88.27% 55.17%, 91.78% 65.85%, 89.28% 74.61%, 76.09% 82.58%, 54.13% 91.08%, 17.97% 96.54%, 1px 100.32%, 100% 100%);
      } 
    }
  }
}

.organic-bg-shapes3 {
  position: relative;
  height: 274px;
  width: 100%;

  svg {
    @include organic-shape-content(328px, 274px, 19%, 19%);

    .content {
      &::before {
        shape-outside: polygon(0px 0px, 85.22% 2px, 84.75% 9.09%, 72.28% 12.49%, 49.5% 18.75%, 38.63% 28.35%, 28.18% 37.49%, 19.13% 49.87%, 13.71% 65.43%, 18.07% 80.06%, 33.3% 89.63%, 55.36% 93.12%, 84.90% 93.40%, 99.38% 100.53%, 0% 100%);
      }

      span::before {
        shape-outside: polygon(100% 0px, 1px 1px, -0.7% 9.27%, 23.04% 11.51%, 43.81% 17.45%, 59.49% 24.83%, 70.38% 31.9%, 79.43% 48.82%, 78.84% 62.06%, 66.99% 74.3%, 51.69% 83.81%, 28.97% 89.33%, -1.34% 93.06%, -3px 100.53%, 100% 99%);
      } 
    }
  }
}

.organic-bg-shapes4 {
  position: relative;
  height: 322px;
  width: 100%;

  svg {
    @include organic-shape-content(331px, 322px, 19%, 19%);

    .content {
      &::before {
        shape-outside: polygon(0px 0px, 103.48% 8px, 81.37% 5.62%, 65.51% 9.82%, 48.15% 15.92%, 32.53% 26.39%, 20.74% 38.19%, 15.07% 49.58%, 14.39% 64.5%, 25.51% 73.98%, 42.09% 81.12%, 67.54% 85.07%, 99.11% 85.91%, 99.38% 100.53%, 0% 100%);
      }

      span::before {
        shape-outside: polygon(100% 0px, -1px 0px, 4.71% 4.4%, 25.75% 6.35%, 47.19% 12.23%, 69.63% 21.41%, 79.85% 32.16%, 87.55% 43.84%, 84.93% 57.65%, 75.1% 68.09%, 59.13% 73.26%, 36.41% 80.86%, -0.66% 85.58%, -3px 100.53%, 100% 100%);
      } 
    }
  }
}

.organic-bg-shapes5 {
  position: relative;
  height: 405px;
  width: 100%;

  svg {
    @include organic-shape-content(365px, 405px, 14%, 21%);

    .content {
      &::before {
        shape-outside: polygon(0px 0px, 101.59% -1px, 101.27% 5.68%, 83.77% 5.72%, 65.07% 8.38%, 47.07% 15.54%, 37.38% 26.41%, 29.80% 44.72%, 30.2% 62.18%, 39.35% 77.04%, 57.29% 86.59%, 77.38% 90.59%, 101.06% 93.1%, 101.79% 100%, 0% 100%);
      }

      span::before {
        shape-outside: polygon(100% 0px, 4px 2px, 15.97% 4.30%, 36.74% 6.77%, 62.62% 14.55%, 81.02% 26.18%, 84.9% 40.31%, 77.98% 49.69%, 73.22% 64.56%, 64.28% 74.61%, 46.41% 84.2%, 24.18% 90.11%, 0% 94.6%, 1px 100%, 100% 100%);
      } 
    }
  }
}

.organic-bg-shapes6 {
  position: relative;
  height: 367px;
  width: 100%;

  svg {
    @include organic-shape-content(349px, 367px, 17%, 12%);

    .content {
      &::before {
        shape-outside: polygon(0px 0px, 94.92% 36px, 60.23% 15.29%, 38.28% 20.98%, 19.28% 29.01%, 11.57% 37.91%, 5.3% 49.45%, 9.88% 62.17%, 23.43% 73.93%, 36.95% 81.97%, 61.67% 87.04%, 84.11% 88.39%, 100.75% 88.14%, 100% 100%, 0% 100%);
      }

      span::before {
        shape-outside: polygon(100% 0px, -2px 38px, 28.54% 14%, 53.52% 19.04%, 75.6% 27.74%, 86.6% 36.58%, 93.06% 47.95%, 92.56% 57.74%, 84.09% 66.57%, 71.81% 74.7%, 51.3% 81.61%, 26.44% 86.12%, 1.36% 87.94%, 0px 100%, 100% 100%);
      } 
    }
  }
}