.container { background-color: #fdf8ef; width: 250px; padding: 12px; border-radius: 20px; margin-right: 12px; } .container:last-child { margin-right: 0; } .container-background { position: absolute; top: 0; width: 330px; height: 600px; z-index: 2; background-image: url(background.svg); background-repeat: no-repeat; background-position: center; background-size: 50%; opacity: 0.1; top: 25px; } .container-background.first-item { left: 35px; } .container-background.second-item { left: 325px; } .container-background.third-item { left: 610px; } .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 { padding-top: 1px; padding-bottom: 3px; } .code-box.second-item, .code-box.third-item { padding-top: 4px; } .code-box span { font-size: 20px; letter-spacing: 0.29em; font-weight: 300; }