.feed-hero-block {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 3rem 2rem 1rem;
    height: 250px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.feed-hero-block.bg1 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-1.jpg);
}
.feed-hero-block.bg2 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-2.jpg);
}
.feed-hero-block.bg3 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-3.jpg);
}
.feed-hero-block.bg4 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-4.jpg);
}
.feed-hero-block.bg5 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-5.jpg);
}
.feed-hero-block.bg6 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-6.jpg);
}
.feed-hero-block.bg7 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-7.jpg);
}
.feed-hero-block.bg8 {
    background-image: url(/templates/47/we2/img/join-cover/we-ua-join-cover-8.jpg);
}
.feed-hero-block h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--white);
    padding: 0;
    line-height: 1.25em;
}
body.dark .feed-hero-block {
    filter: grayscale(0.5);
}

ul.advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--secondary);
    counter-reset: count;
}
ul.advantages-list li {
    counter-increment: count;
    padding: 0;
    margin: 1rem 0 0 auto;
}
ul.advantages-list li:before {
    content: counter(count, digit);
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--white);
    border: solid 1px var(--light);
    margin-right: 0.5rem;
    text-align: center;
    vertical-align: middle;
    line-height: 28px;
}
div.users-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}
div.users-list > div {
    padding: 0 0.5rem;
}

@media (min-width: 360px) {
    .feed-hero-block {
        padding: 2rem;
    }
    .feed-hero-block h2 {
        font-size: 2rem;
    }
}

@media (min-width: 480px) {
    .feed-hero-block {
        padding: 2rem 100px 2rem 3rem;
    }
}

@media (min-width: 576px) {
    .feed-hero-block {
        padding: 2rem 200px 2rem 3rem;
    }
}

@media (min-width: 768px) {
    .feed-hero-block {
        padding: 2rem 250px 2rem 3rem;
    }
}