.region--features {
  :is(.card--shuk, .card--shl, .card--ftm, .card--tm, .card--spo, .card--tfm) {
    border-width: var(--c6-border-size-base);
    border-style: var(--c6-border-style-base);
  }

  .card--shuk {
    background-color: var(--c6-color-ui-card-shuk);
    border-color: var(--c6-color-ui-card-shuk);

    &:hover {
      background-color: var(--c6-color-hover-card-shuk);
    }
  }

  .card--shl {
    background-color: var(--c6-color-ui-card-shl);
    border-color: var(--c6-color-ui-card-shl);

    &:hover {
      background-color: var(--c6-color-hover-card-shl);
    }
  }

  .card--ftm {
    background-color: var(--c6-color-ui-card-ftm);
    border-color: var(--c6-color-ui-card-ftm);

    &:hover {
      background-color: var(--c6-color-hover-card-ftm);
    }
  }

  .card--tm {
    background-color: var(--c6-color-ui-card-tm);
    border-color: var(--c6-color-ui-card-tm);

    &:hover {
      background-color: var(--c6-color-hover-card-tm);
    }
  }

  .card--spo {
    background-color: var(--c6-color-ui-card-spo);
    border-color: var(--c6-color-ui-card-spo);

    &:hover {
      background-color: var(--c6-color-hover-card-spo);
    }
  }

  .card--tfm {
    background-color: var(--c6-color-ui-card-tfm);
    border-color: var(--c6-color-ui-card-tfm);

    &:hover {
      background-color: var(--c6-color-hover-card-tfm);
    }
  }
}