.ribbon-wrapper {
    height: 70px;
    overflow: hidden;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 70px;
    z-index: 10;
}

    .ribbon-wrapper.ribbon-lg {
        height: 120px;
        width: 120px;
    }

        .ribbon-wrapper.ribbon-lg .ribbon {
            right: 0;
            top: 26px;
            width: 160px;
        }

    .ribbon-wrapper.ribbon-xl {
        height: 180px;
        width: 180px;
    }

        .ribbon-wrapper.ribbon-xl .ribbon {
            right: 4px;
            top: 47px;
            width: 240px;
        }

    .ribbon-wrapper .ribbon {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        font-size: 0.8rem;
        line-height: 100%;
        padding: 0.375rem 0;
        position: relative;
        right: -2px;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
        top: 10px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 90px;
    }

        .ribbon-wrapper .ribbon::before, .ribbon-wrapper .ribbon::after {
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3px solid #9e9e9e;
            bottom: -3px;
            content: "";
            position: absolute;
        }

        .ribbon-wrapper .ribbon::before {
            left: 0;
        }

        .ribbon-wrapper .ribbon::after {
            right: 0;
        }