ru-assets/app/assets/styles/content/centerbar/specials.scss

.special-items {

    &__container {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 5px -10px 5px 0;
    }

    &__item {
        width: 220px;
        box-sizing: border-box;
        border-radius: 10px 0 0 0;
        border: 1px solid #ebebeb;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 15px 10px;
        color: #000000;
        text-decoration: none;

        &:hover {
            border-color: #d2dee9;
        }
        &:hover .special-items__organization-address {
            background: #d2dee9;
        }
    }

    &__title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #ffffff;
        font-family: $fontcuprum;
        font-size: 13px;
        background-color: #656565;
        padding: 10px;
        border-radius: 10px 0 0 0;
        margin-left: -1px;
        margin-right: -1px;
        margin-top: -1px;

        &--specials {
            background-color: #e65e26;
        }

        &--exhibition {
            background-color: #53b02e;
        }

        &--school {
            background-color: #929292;
        }

        &--conference {
            background-color: #5597d1;
        }
    }

    &__badge {
        &--specials {
            @extend .entity-badge__badge--orange;
        }

        &--exhibition {
            @extend .entity-badge__badge--green;
        }

        &--school {
            @extend .entity-badge__badge--gray;
        }

        &--conference {
            @extend .entity-badge__badge--blue;
        }
    }

    &__item-content {
        padding: 10px;
        display: block;
    }

    &__item-images {
        position: relative;
        display: block;
    }

    &__image {
        max-width: 100%;
        display: block;
    }

    &__organization-icon {
        max-width: 64px;
        position: absolute;
        top: 12px;
        right: 12px;
        border-radius: 50%;
        display: block;
    }

    &__description {
        font-family: $fontcuprum;
        font-size: 15px;
        padding: 5px 0;
        display: block;
        margin: 0 -3px 0 -3px;
    }

    &__horizontal-rule {
        display: block;
        margin: 0 10px;
        border: none;
        border-bottom: 1px solid #ebebeb;
    }

    &__organization-name {
        font-family: $fontcuprum;
        font-size: 13px;
        color: #004d7b;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 40px;
        padding: 5px 20px;
        text-align: center;
        box-sizing: border-box;
    }

    &__organization-address {
        font-family: $fontcuprum;
        font-size: 13px;
        background: #ebebeb;
        color: #929292;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 40px;
        padding: 5px 26px;
        overflow: hidden;
        text-align: center;
        box-sizing: border-box;
    }
}