<div class="contain">
    <div class="item example-4">
      
    </div>
  </div>

  <div class="contain">
    <div class="item example-4" style="background: #651919;">
      
    </div>
  </div>

/*...... Demo Styles ........*/
.example-4 {
	position: relative;
	height: 150px;
  max-width: 400px;
	background: #276519;
	//animation: bg 2s ease-out alternate infinite;

	&:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to right, rgba(#fff, 0.2), rgba(#fff, 0.7));
	}
}

@keyframes bg {
	to {
		background: green;
	}
}

/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}

.item {
	margin-bottom: 1em;
  text-align: center;
}

input, button {
  border: 0;
}