.container { background-color: #fdf8ef; width: 250px; padding: 12px; border-radius: 20px; margin-right: 12px; position: relative; } .container:last-child { margin-right: 0; } .container-background { position: absolute; top: 50%; left: 50%; width: 200px; z-index: 2; opacity: 0.1; transform: translate(-50%, -50%); } .container-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .container-header p { font-size: 22px; margin: 0; } .container-header .percentage { font-weight: bold; } .container-header img { margin-bottom: 10px; } .container-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .container-action img { height: 100px; } .container-action .status-box { background-color: rgba(185, 147, 99, 0.1); border-radius: 7px; padding: 6px 16px; } .container-action .status-box .closed { color: #a80000; } .container-action .status-box .open { color: #0c620a; } .container-action .time-needed-box { text-align: center; } .container-action .time-needed-box span { color: #5a5a5a; font-size: 12px; } .minimum-order-value-box { text-align: center; padding-bottom: 4px; } .minimum-order-value-box span { color: #616161; font-size: 12px; } .code-box { background-color: rgba(185, 147, 99, 0.1); border-radius: 7px; text-align: center; } .code-box.first-item { /* margin-top: 4px; */ padding-top: 1px; padding-bottom: 2.5px; } .code-box.second-item, .code-box.third-item { padding-top: 4px; } .code-box span { font-size: 20px; letter-spacing: 0.29em; font-weight: 300; }