.card-key-number {
  position: relative;
  background: var(--bs-white);
  border-radius: var(--radius-medium);
  color: var(--bs-primary);
  height: 100%;

  .icon-wrapper {
    position: absolute;
    top: calc(var(--spacing-5) / 2);
    right: calc(var(--spacing-5) / 2);

    &.icon-circle {
      padding: 9px;
    }
  }

  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 56px;
    background-color: var(--secondary-500);
    mask-image: url("../../assets/images/svg/decoration-left.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
  }

  &:after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 56px;
    background-color: var(--secondary-500);
    mask-image: url("../../assets/images/svg/decoration-right.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
  }

  .card-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
  }

  .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);

    .title {
      font-family: 'Fraunces', serif;
      font-size: 3rem;
      font-weight: 900;
      line-height: 110%;
      margin: 0;
    }
  }

  .card-text {
    font-size: 1rem;
    line-height: 1.5;
  }
}