.btn-mode {
  max-width: 100%;
}

.modebg {
  background-color: $color-yellowgray;
}

.mode-title {
  color: $color-brown;
}

.mode-box {
  color:$color-brown;
  background-color: $color-gold;
  border: 4px solid $color-brown;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.mode-box:hover {
  color: $color-white;
  background-color: $color-brown;
}

.mode-box-image {
  max-width: 300px;
  width: 100%;
  border: solid 2px $color-brown;
}

.mode-label {
  font-weight:400;
  font-style: italic;
}

.mode-description {
  max-width: 300px;
}

.modefloatRight {
  float: right;
}

.modefloatLeft {
  float: left;
}

.mode-pad {
  padding-left: 5px;
  padding-right: 5px;
}

@media screen and (max-width: 992px) {
  .modefloatRight,
  .modefloatLeft {
    float: none;
  }

  .mode-pad {
    padding: inherit;
  }
}

.btn-mode {
  max-width: 100%;
}

.modebg {
  background-color: $color-yellowgray;
}

.mode-title {
  color: $color-brown;
}

.mode-box {
  color:$color-brown;
  background-color: $color-gold;
  border: 4px solid $color-brown;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.mode-box:hover {
  color: $color-white;
  background-color: $color-brown;
}

.mode-box-image {
  max-width: 300px;
  width: 100%;
  border: solid 2px $color-brown;
}

.mode-box:active, {
  color: $color-white;
  background-color: $color-red;
}

.mode-label {
  font-weight:400;
  font-style: italic;
}

.mode-description {
  max-width: 300px;
}

.modefloatRight {
  float: right;
}

.modefloatLeft {
  float: left;
}

.mode-pad {
  padding-left: 5px;
  padding-right: 5px;
}

@media screen and (max-width: 992px) {
  .modefloatRight,
  .modefloatLeft {
    float: none;
  }

  .mode-pad {
    padding: inherit;
  }
}

Change style when button is clicked
Change style when button is clicked
