#color-palette {
  width:250px;
  height:auto;
  border:1px solid hotpink;

}

// additional variables
$color-gold-darker: #936f38;

.palette-container {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 24%);
  grid-auto-flow: row;
  height: auto;
  padding-bottom:30px;

  .palette-swatch {
    border: 1px solid $color-gray-warm-light;
    padding: 10px;

    .swatch {
      display: inline-block;
      width:100%;
      height:70px;

      &.color-link-default {
        background-color: $color-link-default;
      }

      &.color-visited {
        background-color: $color-link-visited;
      }

      &.color-focus {
        background-color: $color-focus;
      }

      &.color-base {
        background-color: $color-base;
      }

      &.color-black {
        background-color: $color-black;
      }

      &.color-white {
        background-color: $color-white;
        border:1px solid $color-gray-warm-light;
      }

      &.color-primary {
        background-color: $color-primary;
      }

      &.color-primary-darker {
        background-color: $color-primary-darker;
      }

      &.color-primary-darkest {
        background-color: $color-primary-darkest;
      }

      &.color-primary-alt {
        background-color: $color-primary-alt;
      }

      &.color-primary-alt-lightest {
        background-color: $color-primary-alt-lightest;
      }

      &.color-primary-alt-light {
        background-color: $color-primary-alt-light;
      }

      &.color-primary-alt-dark {
        background-color: $color-primary-alt-dark;
      }

      &.color-primary-alt-darkest {
        background-color: $color-primary-alt-darkest;
      }

      &.color-secondary {
        background-color: $color-secondary;
      }

      &.color-secondary-lightest {
        background-color: $color-secondary-lightest;
      }

      &.color-secondary-light {
        background-color: $color-secondary-light;
      }

      &.color-secondary-dark {
        background-color: $color-secondary-dark;
      }

      &.color-secondary-darkest {
        background-color: $color-secondary-darkest;
      }

      &.color-gray-dark {
        background-color: $color-gray-dark;
      }

      &.color-gray-lightest {
        background-color: $color-gray-lightest;
      }

      &.color-gray-lighter {
        background-color: $color-gray-lighter;
      }

      &.color-gray-light {
        background-color: $color-gray-light;
      }

      &.color-gray-medium {
        background-color: $color-gray-medium;
      }

      &.color-gray {
        background-color: $color-gray;
      }

      &.color-gray-warm-dark {
        background-color: $color-gray-warm-dark;
      }

      &.color-gray-warm-light {
        background-color: $color-gray-warm-light;
      }

      &.color-gray-cool-light {
        background-color: $color-gray-cool-light;
      }

      &.color-gold {
        background-color: $color-gold;
      }

      &.color-gold-lightest {
        background-color: $color-gold-lightest;
      }

      &.color-gold-lighter {
        background-color: $color-gold-lighter;
      }

      &.color-gold-light {
        background-color: $color-gold-light;
      }

      &.color-gold-darker {
        background-color: $color-gold-darker;
      }

      &.color-green {
        background-color: $color-green;
      }

      &.color-green-lightest {
        background-color: $color-green-lightest;
      }

      &.color-green-lighter {
        background-color: $color-green-lighter;
      }

      &.color-green-light {
        background-color: $color-green-light;
      }

      &.color-green-darker {
        background-color: $color-green-darker;
      }

    }
  }
}