@import ../../../styles/helpers

.section
    overflow: hidden
    padding-bottom: 120px
    +x
        padding-bottom: 100px
    +m
        padding-bottom: 60px

.top
    display: flex
    align-items: center
    margin-bottom: 52px
    +m
        display: block
        margin-bottom: 32px

.stage
    +body-bold-1
    color: $neutrals4

.label
    margin-bottom: 12px
    +hairline-2
    color: $neutrals5

.field
    .dropdown
        min-width: 256px
        +m
            min-width: 100%

.box
    margin-right: auto
    +m
        margin: 0 0 16px
    .title
        min-width: auto

        +m
            display: inline-block

.wrapper
    margin: 0 -16px
    +m
        margin: 0 -4px

.item
    padding: 24px
    border-radius: 16px
    background: $neutrals8
    min-height: 280px
    transition: box-shadow .2s
    +dark
        background: $neutrals1
    &:hover
        box-shadow: 0px 64px 64px -48px rgba(31, 47, 70, 0.12)
        .avatar
            width: 86px
            +d
                width: 86px

.control
    display: flex

.button
    svg
        fill: $neutrals5
        transition: fill .2s
    &:hover
        svg
            fill: $blue
    &:not(:last-child)
        margin-right: 8px

.body
    text-align: center

.avatar
    position: relative
    width: 86px
    margin: 0 auto 16px
    transform: scale(1.023)
    transition: transform .3s
    border-radius: 50%
    span
        border-radius: 50%

.reward
    position: absolute
    right: -4px
    bottom: -4px

.name
    margin-bottom: 2px
    font-weight: 500

.price
    +caption-2
    color: $neutrals4
    span
        font-weight: 600
        color: $neutrals2
        +dark
            color: $neutrals6
