.margin {
  &-none {
    margin: 0;
  }
  &-xxsmall {
    margin: 5px;
  }
  &-xsmall {
    margin: 10px;
  }
  &-small {
    margin: 15px;
  }
  &-medium {
    margin: 20px;
  }
  &-large {
    margin: 25px;
  }
  &-xlarge {
    margin: 30px;
  }
  &-xxlarge {
    margin: 35px;
  }
  &-top {
    &-none {
      margin-top: 0;
    }
    &-xxsmall {
      margin-top: 5px;
    }
    &-xsmall {
      margin-top: 10px;
    }
    &-small {
      margin-top: 15px;
    }
    &-medium {
      margin-top: 20px;
    }
    &-large {
      margin-top: 25px;
    }
    &-xlarge {
      margin-top: 30px;
    }
    &-xxlarge {
      margin-top: 35px;
    }
  }
  &-right {
    &-none {
      margin-right: 0;
    }
    &-xxsmall {
      margin-right: 5px;
    }
    &-xsmall {
      margin-right: 10px;
    }
    &-small {
      margin-right: 15px;
    }
    &-medium {
      margin-right: 20px;
    }
    &-large {
      margin-right: 25px;
    }
    &-xlarge {
      margin-right: 30px;
    }
    &-xxlarge {
      margin-right: 35px;
    }
  }
  &-bottom {
    &-none {
      margin-bottom: 0;
    }
    &-xxsmall {
      margin-bottom: 5px;
    }
    &-xsmall {
      margin-bottom: 10px;
    }
    &-small {
      margin-bottom: 15px;
    }
    &-medium {
      margin-bottom: 20px;
    }
    &-large {
      margin-bottom: 25px;
    }
    &-xlarge {
      margin-bottom: 30px;
    }
    &-xxlarge {
      margin-bottom: 35px;
    }
  }
  &-left {
    &-none {
      margin-left: 0;
    }
    &-xxsmall {
      margin-left: 5px;
    }
    &-xsmall {
      margin-left: 10px;
    }
    &-small {
      margin-left: 15px;
    }
    &-medium {
      margin-left: 20px;
    }
    &-large {
      margin-left: 25px;
    }
    &-xlarge {
      margin-left: 30px;
    }
    &-xxlarge {
      margin-left: 35px;
    }
  }
}

@media (max-width: 768px) {

  .sm-margin {
    &-none {
      margin: 0;
    }

    &-xxsmall {
      margin: 5px;
    }

    &-xsmall {
      margin: 10px;
    }

    &-small {
      margin: 15px;
    }

    &-medium {
      margin: 20px;
    }

    &-large {
      margin: 25px;
    }

    &-xlarge {
      margin: 30px;
    }

    &-xxlarge {
      margin: 35px;
    }

    &-top {
      &-none {
        margin-top: 0;
      }
      &-xxsmall {
        margin-top: 5px;
      }

      &-xsmall {
        margin-top: 10px;
      }

      &-small {
        margin-top: 15px;
      }

      &-medium {
        margin-top: 20px;
      }

      &-large {
        margin-top: 25px;
      }

      &-xlarge {
        margin-top: 30px;
      }

      &-xxlarge {
        margin-top: 35px;
      }
    }

    &-right {
      &-none {
        margin-right: 0;
      }
      &-xxsmall {
        margin-right: 5px;
      }

      &-xsmall {
        margin-right: 10px;
      }

      &-small {
        margin-right: 15px;
      }

      &-medium {
        margin-right: 20px;
      }

      &-large {
        margin-right: 25px;
      }

      &-xlarge {
        margin-right: 30px;
      }

      &-xxlarge {
        margin-right: 35px;
      }
    }

    &-bottom {
      &-none {
        margin-bottom: 0;
      }
      &-xxsmall {
        margin-bottom: 5px;
      }

      &-xsmall {
        margin-bottom: 10px;
      }

      &-small {
        margin-bottom: 15px;
      }

      &-medium {
        margin-bottom: 20px;
      }

      &-large {
        margin-bottom: 25px;
      }

      &-xlarge {
        margin-bottom: 30px;
      }

      &-xxlarge {
        margin-bottom: 35px;
      }
    }

    &-left {
      &-none {
        margin-left: 0;
      }
      &-xxsmall {
        margin-left: 5px;
      }

      &-xsmall {
        margin-left: 10px;
      }

      &-small {
        margin-left: 15px;
      }

      &-medium {
        margin-left: 20px;
      }

      &-large {
        margin-left: 25px;
      }

      &-xlarge {
        margin-left: 30px;
      }

      &-xxlarge {
        margin-left: 35px;
      }
    }
  }
}

.children-margin {
  &-none>div>solid-display {
    margin: 0;
  }
  &-xxsmall>div>solid-display {
    margin: 5px;
  }
  &-xsmall>div>solid-display {
    margin: 10px;
  }
  &-small>div>solid-display {
    margin: 15px;
  }
  &-medium>div>solid-display {
    margin: 20px;
  }
  &-large>div>solid-display {
    margin: 25px;
  }
  &-xlarge>div>solid-display {
    margin: 30px;
  }
  &-xxlarge>div>solid-display {
    margin: 35px;
  }
  &-top {
    &-none>div>solid-display {
      margin-top: 0;
    }
    &-xxsmall>div>solid-display {
      margin-top: 5px;
    }
    &-xsmall>div>solid-display {
      margin-top: 10px;
    }
    &-small>div>solid-display {
      margin-top: 15px;
    }
    &-medium>div>solid-display {
      margin-top: 20px;
    }
    &-large>div>solid-display {
      margin-top: 25px;
    }
    &-xlarge>div>solid-display {
      margin-top: 30px;
    }
    &-xxlarge>div>solid-display {
      margin-top: 35px;
    }
  }
  &-right {
    &-none>div>solid-display {
      margin-right: 0;
    }
    &-xxsmall>div>solid-display {
      margin-right: 5px;
    }
    &-xsmall>div>solid-display {
      margin-right: 10px;
    }
    &-small>div>solid-display {
      margin-right: 15px;
    }
    &-medium>div>solid-display {
      margin-right: 20px;
    }
    &-large>div>solid-display {
      margin-right: 25px;
    }
    &-xlarge>div>solid-display {
      margin-right: 30px;
    }
    &-xxlarge>div>solid-display {
      margin-right: 35px;
    }
  }
  &-bottom {
    &-none>div>solid-display {
      margin-bottom: 0;
    }
    &-xxsmall>div>solid-display {
      margin-bottom: 5px;
    }
    &-xsmall>div>solid-display {
      margin-bottom: 10px;
    }
    &-small>div>solid-display {
      margin-bottom: 15px;
    }
    &-medium>div>solid-display {
      margin-bottom: 20px;
    }
    &-large>div>solid-display {
      margin-bottom: 25px;
    }
    &-xlarge>div>solid-display {
      margin-bottom: 30px;
    }
    &-xxlarge>div>solid-display {
      margin-bottom: 35px;
    }
  }
  &-left {
    &-none>div>solid-display {
      margin-left: 0;
    }
    &-xxsmall>div>solid-display {
      margin-left: 5px;
    }
    &-xsmall>div>solid-display {
      margin-left: 10px;
    }
    &-small>div>solid-display {
      margin-left: 15px;
    }
    &-medium>div>solid-display {
      margin-left: 20px;
    }
    &-large>div>solid-display {
      margin-left: 25px;
    }
    &-xlarge>div>solid-display {
      margin-left: 30px;
    }
    &-xxlarge>div>solid-display {
      margin-left: 35px;
    }
  }
}

@media (max-width: 768px) {

  .sm-children-margin {
    &-none>div>solid-display {
      margin: 0;
    }
    &-xxsmall>div>solid-display {
      margin: 5px;
    }

    &-xsmall>div>solid-display {
      margin: 10px;
    }

    &-small>div>solid-display {
      margin: 15px;
    }

    &-medium>div>solid-display {
      margin: 20px;
    }

    &-large>div>solid-display {
      margin: 25px;
    }

    &-xlarge>div>solid-display {
      margin: 30px;
    }

    &-xxlarge>div>solid-display {
      margin: 35px;
    }

    &-top {
      &-none>div>solid-display {
        margin-top: 0;
      }
      &-xxsmall>div>solid-display {
        margin-top: 5px;
      }

      &-xsmall>div>solid-display {
        margin-top: 10px;
      }

      &-small>div>solid-display {
        margin-top: 15px;
      }

      &-medium>div>solid-display {
        margin-top: 20px;
      }

      &-large>div>solid-display {
        margin-top: 25px;
      }

      &-xlarge>div>solid-display {
        margin-top: 30px;
      }

      &-xxlarge>div>solid-display {
        margin-top: 35px;
      }
    }

    &-right {
      &-none>div>solid-display {
        margin-right: 0;
      }
      &-xxsmall>div>solid-display {
        margin-right: 5px;
      }

      &-xsmall>div>solid-display {
        margin-right: 10px;
      }

      &-small>div>solid-display {
        margin-right: 15px;
      }

      &-medium>div>solid-display {
        margin-right: 20px;
      }

      &-large>div>solid-display {
        margin-right: 25px;
      }

      &-xlarge>div>solid-display {
        margin-right: 30px;
      }

      &-xxlarge>div>solid-display {
        margin-right: 35px;
      }
    }

    &-bottom {
      &-none>div>solid-display {
        margin-bottom: 0;
      }
      &-xxsmall>div>solid-display {
        margin-bottom: 5px;
      }

      &-xsmall>div>solid-display {
        margin-bottom: 10px;
      }

      &-small>div>solid-display {
        margin-bottom: 15px;
      }

      &-medium>div>solid-display {
        margin-bottom: 20px;
      }

      &-large>div>solid-display {
        margin-bottom: 25px;
      }

      &-xlarge>div>solid-display {
        margin-bottom: 30px;
      }

      &-xxlarge>div>solid-display {
        margin-bottom: 35px;
      }
    }

    &-left {
      &-none>div>solid-display {
        margin-left: 0;
      }
      &-xxsmall>div>solid-display {
        margin-left: 5px;
      }

      &-xsmall>div>solid-display {
        margin-left: 10px;
      }

      &-small>div>solid-display {
        margin-left: 15px;
      }

      &-medium>div>solid-display {
        margin-left: 20px;
      }

      &-large>div>solid-display {
        margin-left: 25px;
      }

      &-xlarge>div>solid-display {
        margin-left: 30px;
      }

      &-xxlarge>div>solid-display {
        margin-left: 35px;
      }
    }
  }
}