src/app/palette-picker/palette-picker.component.scss
.palettes {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "primary accent warn";
  margin-bottom: 1em;
}

.text {
  grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: 25px 35px 35px;
  align-items: center;
  display: grid;
  grid-row-gap: 5px;
  grid-template-areas:
    "title txt bg"
    "lt lt-txt lt-bg"
    "dk dk-txt dk-bg";

  .bg, .txt, .lt, .dk {   
    font-size: .8rem;
  }

  .lt-illegible {
    background-color: darken(red, 10%);
    height: 100%;
    grid-column: 1/ span 3 ;
    grid-row: 2 ;
  }

  .dk-illegible {
    background-color: darken(red, 10%);
    height: 100%;
    grid-column: 1/ span 3 ;
    grid-row: 3;
  }



  .lt, .dk {
    text-align: center  ;
    line-height: 35px;
    margin: 0;
    padding: 0;
    margin-right: 7.5px;
    &.illegible {
      color: white;
      font-weight: bold;
    }
  }
  .bg, .txt {
    text-align: center;
  }

  h3 { 
    a {
      display: inline-block;
    }
    grid-area: title; 
  }
  .lt { grid-area: lt; }
  .dk { grid-area: dk; }
  .bg { grid-area: bg; }
  .txt { grid-area: txt; }
  .lt-bg { grid-area: lt-bg; }
  .lt-txt { grid-area: lt-txt; }
  .dk-bg { grid-area: dk-bg; }
  .dk-txt { grid-area: dk-txt; }

  app-color-picker {
    height: 27px;
    box-sizing: border-box;
    padding: 0;
    padding-right: 7.5px;

    & ::ng-deep input {
      display: block;
      border: 1px solid rgba(0, 0, 0, .15);    
    }
  }
}

.primary {
  grid-area: primary;
}

.accent {
  grid-area: accent;
}

.warn {
  grid-area: warn;
}


h2, h3, h4 {
  margin: 0;
  line-height: 1.5em;
}

h3 {
  font-size: 1rem;
}
h4 {
  font-size: .8rem;
}


ul {
  list-style-position: inside;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: .5em;

  li {
    padding: .1em;
    font-size: 9pt;
    text-align: center;
  }
}