.color-square {
  height: 3rem;
  min-height: 3rem;
  width: 3rem;
  min-width: 3rem;
  margin-right: 1rem;
  background-color: blue;
  align-self: flex-start;
  font-size: 2rem;
  font-family: 'OpenSans-SemiBold', sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-list { flex: 1 1; }

.color-list > * { margin-bottom: 1rem; }

.color-1 { background-color: #490083}
.color-2 { background-color: #3D128D; }
.color-3 { background-color: #332397; }
.color-4 { background-color: #2934A1; }
.color-5 { background-color: #1E44AA; }
.color-6 { background-color: #1455B4; }
.color-7 { background-color: #0A65BD; }
.color-8 { background-color: #0173C5; }

.color-list h3 a {
    font-size: 1.6rem;
    margin-left: 2ch;
}

@media only screen and (min-width: 768px) {
  .color-square {
    height: 3.6rem;
    min-height: 3.6rem;
    width: 3.6rem;
    min-width: 3.6rem;
    margin-right: 1.7rem;
    font-size: 3rem;
  }
  
  .color-list > * { margin-bottom: 3rem; }

  .color-list-wrapper svg {
    width: 18rem;
    min-width: 18rem;
    margin-left: 3rem;
    min-height: 120rem;
  }
}



@media only screen and (min-width: 1024px) {
  .color-list-wrapper svg {
    width: 19rem;
    min-width: 19rem;
    margin-left: 4rem;
  }
}

@media only screen and (min-width: 1480px) {
  .color-list-wrapper svg {
    width: 19rem;
    min-width: 19rem;
    margin-left: 7rem;
    margin-right: 2rem;
  }
}