.bloodline-devider
    font-size: 42px
    text-align: center
    margin: 16px 0
    @media (min-width: 992px)
        margin: 24px 0

.bloodline-border
    padding: 16px
    border-radius: 16px
    border: 2px solid #000
    &.bloodline-border--variant1
        border: 4px solid var(--midnight-black)
    @media (min-width: 992px)
        padding: 24px 32px
        border: 4px solid #000
    &.purple
        border-color: var(--purple)

.bloodline-badge
    padding: 8px 16px 8px 16px
    border-radius: 14px
    background-color: #0F0F0F
    display: flex
    .bloodline-badge-icon
        margin-right: 8px

.card
    display: block
    overflow: hidden
    overflow-wrap: break-word
    position: relative
    padding: 0
    text-decoration: none
    transition-duration: .28s
    transition-property: box-shadow,opacity,background
    transition-timing-function: cubic-bezier(.4,0,.2,1)
    z-index: 0
    border-color: rgba(var(--v-border-color),var(--v-border-opacity))
    border-style: solid
    border-width: 0
    border-radius: 16px
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
    background-color: $darkgrey
    @media (min-width: 992px)
        border-radius: 4px
    &.card--variant1
        border-radius: 0

.bloodline-token
    height: 50px
    width: 50px
    @media (min-width: 992px)
        height: auto
        width: auto

.bloodline-container
    padding: 0 24px