.referral-info {
    margin-bottom: 1rem
}

.referral-info__banner {
    display: block;
    width: calc(100% + 1rem);
    transform: translateX(-.5rem)
}

.referral-info__bonus,.referral-info__content,.referral-info__details,.referral-info__steps {
    margin: .5rem 0 1rem
}

.referral-info__bonus>h5,.referral-info__content>h5,.referral-info__details>h5,.referral-info__steps>h5 {
    margin-bottom: .5rem
}

.referral-info__content {
    font-size: .875rem
}

.referral-info__content p {
    margin: .25rem 0
}

.referral-info__steps ul {
    display: grid;
    grid-gap: .5rem;
    grid-auto-rows: 1fr
}

.referral-info__steps ul li {
    position: relative;
    display: grid;
    grid-column-gap: 1rem;
    align-items: center;
    grid-template-columns: 3rem 1fr;
    background-color: #fff;
    color: rgba(0,0,0,.6);
    padding: 1rem;
    border-radius: 5px
}

.referral-info__steps ul li p {
    font-size: .75rem
}

.referral-info__steps ul li h5,.referral-info__steps ul li p {
    grid-column: 2/3
}

.referral-info__steps ul li i {
    grid-column: 1/2;
    position: absolute;
    align-self: center;
    justify-self: center;
    color: #000
}

.referral-info__bonus ul {
    padding: .5rem;
    font-size: .875rem;
    border-radius: 2px;
    background-color: #0d047a
}

.referral-info__bonus li {
    padding: .125rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.referral-info__bonus li label,.referral-info__bonus li span {
    flex: 0 0 50%
}

.referral-info__bonus li span {
    text-align: right
}

.referral-info__details li {
    display: flex;
    align-items: center;
    margin: .5rem 0
}

.referral-info__details li i {
    color: #139c44;
    margin-right: .5rem
}

.referral-info--d {
    display: grid;
    grid-column-gap: 2rem;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin: .5rem 0
}

.referral-info--d>* {
    grid-column: 1/-1
}

.referral-info--d .referral-info__banner {
    width: 100%;
    border-radius: 5px;
    transform: unset
}

.referral-info--d .referral-info__steps ul {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.referral-info--d .referral-info__bonus {
    grid-row: 3/4;
    grid-column: 2/3
}

.referral-info--d .referral-info__details {
    grid-row: 3/4;
    grid-column: 1/2
}

.referral-info--d>.btn {
    margin: 0 auto;
    width: 20rem;
    grid-row: 4/5
}