/* Global Styles */
*,
*:before,
*:after {
    box-sizing: border-box;
}

/* Ribbon Box Styling */
.card {
    background: #e6e6e6; /* darken(@white, 10%) equivalente en CSS */
    width: 360px; /* @ribbon-width - @border-width*2 = 400px - 20px*2 */
    position: relative;
    margin: 5% auto 0;
    font-size: 0;
    border-radius: 0 0 8px 8px;
}
.card-800{
	    height: 680px; /* @ribbon-width*1.125 = 400px*1.125 */
}
.card-400{
	    height: 400px; /* @ribbon-width*1.125 = 400px*1.125 */
}
.card-300{
	    height: 300px; /* @ribbon-width*1.125 = 400px*1.125 */
}
.image img {
    width: 100%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    height: 200px;
}

.copy {
    background: #fff;
    padding: 16px;
    font-size: 11px;
}

.ribbon {
    position: absolute;
    left: -20px; /* -@border-width = -20px */
    top: 30px; /* @border-height*1.5 = 20px*1.5 */
    width: 400px;
    height: 44px; /* @ribbon-height = 44px */
    background: tomato;
    color: #fff;
    line-height: 44px; /* Igual que @ribbon-height */
    font-family: "Neuton", serif;
    text-transform: uppercase;
    font-size: 22px; /* @ribbon-height / 2 = 44px / 2 */
    text-align: center;
    letter-spacing: 3px;
}

.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
    width: 20px; /* @border-width = 20px */
    height: 20px; /* @border-height = 20px */
    border: 10px solid #c0392b; /* darken(@ribbon-bg-clr, 20%) */
}

.ribbon:before {
    top: -20px; /* -@border-height = -20px */
    left: 0;
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon:after {
    top: 44px; /* Igual que @ribbon-height */
    left: 380px; /* @ribbon-width - @border-width = 400px - 20px */
    border-right-color: transparent;
    border-bottom-color: transparent;
}