@layer components {
  .claim {

    @media screen and (--bp-tablet-down) {
      display: none;
    }
  }

  .divider {
    position: relative;
    width: 100%;
    text-align: center;
  }

  .dividersymbol {
    position: relative;

    font-family: var(--divider-font);
    font-size: var(--divider-font-size);
    line-height: var(--divider-line-height);
    color: var(--divider-color);

    transition: var(--subtitle-transition);

    &::before,
    &::after {
      content: '';

      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      width: var(--divider-width);
      height: var(--divider-height);

      background-color: var(--divider-color);
    }

    &::before {
      left: calc(var(--divider-width) *-1);
    }

    &::after {
      right: calc(var(--divider-width) *-1);
    }
  }

  .subtitle {
    font-family: var(--subtitle-font);
    font-size: var(--subtitle-font-size);
    color: var(--subtitle-color);
    text-transform: var(--subtitle-text-transform);
    letter-spacing: var(--subtitle-letter-spacing);

    transition: var(--subtitle-transition);
  }
}