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

    &__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 {
        position: absolute;
        bottom: 0;
        left: -10px;
        height: 36px;
        line-height: 30px;
        padding-right: 8px;
        max-width: calc(100% - 18px);
        text-overflow: ellipsis;
        color: #fff;
        background-image: url(../img/specials/badge-middle.png);
        font-family: $fontcuprum;
        font-size: 18px;

        &:before {
            position: absolute;
            left: -8px;
            top: 0;
            content: '';
            display: block;
            height: 100%;
            width: 8px;
            background-image: url(../img/specials/badge-start.png);
        }
        &:after {
            position: absolute;
            right: -10px;
            top: 0;
            content: '';
            display: block;
            height: 100%;
            width: 10px;
            background-image: url(../img/specials/badge-end.png);
        }

        &--specials {
            background-position: 0 0;

            &:before,
            &:after {
                background-position: 0 0;
            }
        }

        &--exhibition {
            background-position: 0 -36px;

            &:before,
            &:after {
                background-position: 0 -36px;
            }
        }

        &--school {
            background-position: 0 -72px;

            &:before,
            &:after {
                background-position: 0 -72px;
            }
        }

        &--conference {
            background-position: 0 -108px;

            &:before,
            &:after {
                background-position: 0 -108px;
            }
        }

        &-text {
            overflow: hidden;
            width: 100%;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

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