<div class="container">
  <div class="cactus">
    <div class="cactus__body">
      <div class="cactus__branch">
        <div>
          <div>
            <div class="cactus__thorn"></div>
          </div>
        </div>
      </div>
      <div class="cactus__branch">
        <div>
          <div>
            <div class="cactus__thorn"></div>
          </div>
        </div>
      </div>
      <div class="cactus__thorns">
        <div class="cactus__thorn"></div>
        <div class="cactus__thorn"></div>
        <div class="cactus__thorn"></div>
        <div class="cactus__thorn"></div>
        <div class="cactus__thorn"></div>
        <div class="cactus__thorn"></div>
      </div>
    </div>
  </div>
  <div class="pot">
    <div class="pot__top"></div>
    <div class="pot__left"></div>
    <div class="pot__right"></div>
  </div>
</div>

$background: #f3f9df;
$cactusBody: #abcb89;
$greenShadowRight: #85b271;
$greenShadowLeft: #d0e89b;
$pot: #e7f1d4;
$potShadow: #b4c0ac;
$border-color: #0b2026;

.container {
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  margin-top: 100px;

  &:after {
    content: "";
    display: block;
    width: 80%;
    height: 4px;
    background-color: $border-color;
    position: absolute;
    bottom: 0;
    z-index: 2;
    margin: 0 auto;
  }
}

.cactus {
  &__body {
    height: 150px;
    width: 50px;
    margin: 0 auto;
    background-color: $cactusBody;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    border: 4px solid $border-color;
    position: relative;
  }

  &__branch {
    position: absolute;
    &:first-child {
      top: 50%;
      right: -58px;

      & > div {
        &:first-child {
          width: 50px;
          height: 30px;
          background-color: $cactusBody;
          border-bottom-right-radius: 100px;
          position: relative;
          border: 4px solid $border-color;

          & > div {
            width: 30px;
            height: 40px;
            background-color: $cactusBody;
            top: -44px;
            right: -4px;
            position: absolute;
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            border: 4px solid $border-color;
            border-bottom: none;
          }
        }
      }
    }

    &:nth-of-type(2) {
      top: 20%;
      left: -58px;

      & > div {
        &:first-child {
          width: 50px;
          height: 30px;
          background-color: $cactusBody;
          border-bottom-left-radius: 100px;
          position: relative;
          border: 4px solid $border-color;

          & > div {
            width: 30px;
            height: 40px;
            background-color: $cactusBody;
            top: -44px;
            left: -4px;
            position: absolute;
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            border: 4px solid $border-color;
            border-bottom: none;
          }
        }
      }
    }
  }

  &__thorn {
    border: solid $border-color;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    z-index: 1;

    &:first-child {
      top: 30px;
      left: 10px;
    }

    &:nth-child(2) {
      top: 50px;
      right: 10px;
    }

    &:nth-child(3) {
      top: 70px;
      left: 10px;
    }

    &:nth-child(4) {
      top: 100px;
      right: 10px;
    }

    &:nth-child(5) {
      top: 110px;
      left: 10px;
    }

    &:nth-child(6) {
      top: 80px;
      right: 10px;
    }
  }

  &__thorns {
    overflow: hidden;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    height: 100%;
    position: relative;

    &::before {
      content: "";
      background-color: $greenShadowLeft;
      position: absolute;
      left: 0;
      height: 100%;
      width: 8px;
      border-top-left-radius: 40%;
      border-top-right-radius: 40%;
      bottom: 0;
    }

    &::after {
      content: "";
      background-color: $greenShadowRight;
      position: absolute;
      right: 0;
      height: 100%;
      width: 15px;
      border-top-left-radius: 40%;
      border-top-right-radius: 40%;
      bottom: 0;
    }
  }
}

.pot {
  margin: 0 auto;
  width: 50px;
  height: 60px;
  position: relative;
  &__top {
    width: 80px;
    background-color: $pot;
    height: 10px;
    position: absolute;
    left: -38%;
    top: -10px;
    margin: 0 auto;
    border: 4px solid $border-color;
    z-index: 9;
    &:after {
      content: "";
      position: absolute;
      background-color: $potShadow;
      width: 10px;
      z-index: 3;
      display: block;
      height: 100%;
      right: 0;
    }
  }
  &__left {
    background-color: $pot;
    width: 100%;
    height: 60px;
    position: absolute;
    left: -10px;
    transform: skew(10deg);
    border-left: 4px solid $border-color;
    z-index: 1;
  }

  &__right {
    background-color: $pot;
    width: 100%;
    height: 60px;
    position: absolute;
    right: -10px;
    transform: skew(-10deg);
    border-right: 4px solid $border-color;
    z-index: 1;

    &:after {
      content: "";
      position: absolute;
      background-color: $potShadow;
      width: 10px;
      z-index: 3;
      display: block;
      height: 100%;
      right: 0;
    }
  }
}