.competence {
  position: relative;
  display: flex;

  &__header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 16px;
  }

  &__title {
    margin-bottom: 0;
    font-size: 1.4rem;
  }

  &__subtitle {
    color: var(--pix-neutral-500);
    font-size: 0.9rem;
  }

  &__border {
    margin-right: 1rem;
    padding: 0.5rem 0;
    border-style: solid;
    border-width: 1.5px;
    border-radius: 1.5px;

    &--jaffa {
      background: var(--pix-information-light);
      border-color: var(--pix-information-light);
    }

    &--emerald {
      background: var(--pix-content-light);
      border-color: var(--pix-content-light);
    }

    &--cerulean {
      background: var(--pix-communication-light);
      border-color: var(--pix-communication-light);
    }

    &--wild-strawberry {
      background: var(--pix-security-light);
      border-color: var(--pix-security-light);
    }

    &--butterfly-bush {
      background: var(--pix-environment-light);
      border-color: var(--pix-environment-light);
    }
  }
}
