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

$specials-selector: 'special-items';

.#{$specials-selector} {

    &__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;
        }
    }

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

        @extend .left_border_radius;

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

            .#{$specials-selector}__item:hover & {
                background-color: lighten(#e65e26, 10%);
            }
        }

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

            .#{$specials-selector}__item:hover & {
                background-color: lighten(#53b02e, 10%);
            }
        }

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

            .#{$specials-selector}__item:hover & {
                background-color: lighten(#929292, 10%);
            }
        }

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

            .#{$specials-selector}__item:hover & {
                background-color: lighten(#5597d1, 10%);
            }
        }
    }

    &__badge {
        &--specials {
            @extend .#{$entity-badge-selector}__badge--orange;
        }

        &--exhibition {
            @extend .#{$entity-badge-selector}__badge--green;
        }

        &--school {
            @extend .#{$entity-badge-selector}__badge--gray;
        }

        &--conference {
            @extend .#{$entity-badge-selector}__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;

        .#{$specials-selector}__item:hover & {
            background: #d2dee9;
        }
    }
}