#countdown-election { background: url(https://www.cnnbrasil.com.br/wp-content/uploads/sites/12/2024/03/bg_dengue.png) no-repeat center / cover; width: 100%; height: 130px; display: flex; justify-content: center; align-items: center; color: #fff; } img.logo-eleicoes { float: right; } .box { display: inline-block; } .left { margin-right: 16px; width: 218px; } .center { min-height: 130px; min-width: 388px; background-color: rgba(255, 255, 255, 0.2); } .right {padding-left: 16px; width: 218px; position: relative; border-left: 1px solid; } .card { width: 93px; height: 76px; flex-shrink: 0; border-radius: 8px; background: #fff; } .days { margin-right: 16px; } .minutes, .seconds { margin-left: 16px; } .messages { color: #fff; font-family: "CNN Sans Display"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 0.16px; } .subtitle { font-size: 14px; text-align: center; vertical-align: middle; } #timer { color: #0081d3; text-align: center; font-family: "CNN Sans Display"; font-size: 32px; font-style: normal; font-weight: 900; line-height: normal; div { display: inline-block; span { display: block; color: var(--CNN-Grey-3, #464646); text-align: center; font-family: "CNN Sans Display"; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } } } @media(max-width: 768px) { #countdown-election { flex-wrap: wrap; height: 292px; background-size: cover; background-position: right; } .box.left { width: auto; } .center { width: 100%; order: 3; } .right { position: relative; } .right::before { position: absolute; content: ''; width: 1px; background: #fff; height: 48px; left: -24px; top: 24px; } } @media(max-width: 380px) { .right { width: 140px; } .right::before { top: 36px; } .card { width: 80px; } }
