Alguém me ajuda a deixar esse html responsivo?

Programação
,
#1

Bloco de Citação

Posicionar Ícone body { font-family: 'Ubuntu Sans', sans-serif; background-color: #f4f4f4; padding: 20px; } div#mdCards { box-shadow: none !important; } .card { width: 193px; position: relative; background: white; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; } .saldo { display: flex; align-items: baseline; } .valor { color: #1B1B1B; font-size: 22px; font-family: Ubuntu Sans; font-weight: 600; word-wrap: break-word } .label { color: #1B1B1B; font-size: 16px; font-weight: 400; } .saldo-disponivel { display: flex; color: #373737; font-size: 16px; font-family: Ubuntu Sans; font-weight: 400; word-wrap: break-word; justify-content: space-between; align-items: center; } .transferir { padding: 8px; background: white; border-radius: 4px; border: 1px rgba(25, 31, 58, 0.20) solid; text-align: center; color: #1B1B1B; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; } .separator { width: 100%; border: 1px #E2E2E2 solid; margin: 8px 0; } .saldoR { color: #1B1B1B; font-size: 14px; font-family: Ubuntu Sans; font-weight: 600; word-wrap: break-word; margin-right: 4px; } .label-saldo-atual { color: #1B1B1B; font-size: 16px; font-family: Ubuntu Sans; font-weight: 400; word-wrap: break-word } .toggle { position: absolute; top: 20px; right: 13px; cursor: pointer; font-size: 16px; color: #6C6C6C;

}
.transferir {
color: #1B1B1B;
font-size: 14px;
font-family: Ubuntu Sans;
font-weight: 600;
word-wrap: break-word;
margin-top: -19px;
}
.info-icon {
margin-left: 8px;
/* Espaço entre o texto e o ícone /
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.card-totais-gerais {
width: 473px;
height: 204px;
position: absolute;
background: white;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10);
border-radius: 8px;
margin-left: -48px !important;
}
.icon-container {
display: flex;
align-items: center;
gap: 4px;
}
.icon {
width: 20px;
height: 20px;
position: relative;
}
.checkmark {
width: 16px;
height: 16px;
position: absolute;
left: 2px;
top: 2px;
border: 1.33px solid #1B1B1B;
/ Add additional styles for checkmark /
}
.date {
width: 186px;
color: #6C6C6C;
font-size: 14px;
font-family: ‘Ubuntu Sans’, sans-serif;
font-weight: 400;
word-wrap: break-word;
}
.content {
width: 513px;
height: 112px;
position: absolute;
left: 16px;
top: 57px;
}
.divider {
width: 112px;
height: 0;
border: 1px solid #E2E2E2;
transform: rotate(90deg);
position: absolute;
left: 143px;
top: 0;
}
.values {
display: flex;
gap: 17px;
height: 106px;
position: absolute;
left: 0;
top: 0;
}
.value-item {
width: 116px;
display: flex;
flex-direction: column;
gap: 6px;
}
.label {
color: #272727;
font-size: 14px;
font-family: ‘Ubuntu Sans’, sans-serif;
font-weight: 600;
text-decoration: underline;
word-wrap: break-word;
}
.amount {
color: #6C6C6C;
font-size: 16px;
font-family: ‘Ubuntu Sans’, sans-serif;
font-weight: 400;
word-wrap: break-word;
}
.percentage {
width: 30px;
height: 16px;
padding: 3px 4px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.percentage.red {
background: rgba(248, 88, 88, 0.10);
border: 1px solid #F85858;
left: 400px;
top: 0;
height: 16px;
}
.percentage.green {
background: rgba(95, 163, 12, 0.10);
border: 1px solid #5FA30C;
left: 400px;
top: 61px;
height: 16px;
}
.percent-value {
color: #F85858;
/ Default color, adjust based on context /
font-size: 10px;
font-family: ‘Ubuntu Sans’, sans-serif;
font-weight: 600;
word-wrap: break-word;
}
.values {
display: flex;
}
.value-item {
border-right: 1px solid #E2E2E2;
/ Linha vertical /
}
.value-item:last-child {
border-right: none;
/ Remove a borda do último item /
}
.col-md-3.ct-saldo {
padding: 0px;
}
.col-md-4.valoresGerais{
padding: 0px !important;
}
.ct-saldo .card {
margin-bottom: 0;
/ Remove a margem inferior do Card 1 /
}
.card-totais-gerais {
margin-top: 0;
/ Remove a margem superior do Card 2 /
}
.percentage.green .percent-value {
color: green;
}
/calendário/
input#daterange {
background: #ffffff url(‘calendar.png’) no-repeat 10px center;
/ Ajuste a imagem e a posição /
background-size: 20px;
/ Ajuste o tamanho da imagem /
height: 30px !important;
border: 1px solid #d2d2d2;
padding-left: 35px;
/ Espaço para a imagem /
width: 300px;
/ Ajuste a largura aqui /
}
.input-datapick {
width: 240px;
/ Ajuste a largura aqui /
}
input#daterange {
background: #ffffff url(‘bankline/calendar.png’) no-repeat 10px center;
/ Ajuste a imagem e a posição /
background-size: 20px;
/ Ajuste o tamanho da imagem /
height: 30px !important;
border: 1px solid #d2d2d2;
padding-left: 35px;
/ Espaço para a imagem /
width: 300px;
/ Ajuste a largura aqui /
margin-top: -30px;
}
.input-datapick {
width: 240px;
/ Ajuste a largura aqui /
}
.custom-margin-bottom {
margin-bottom: 20px;
/ Ajuste conforme necessário */
}
/Opções principais/
.main-container {
padding: 16px;
background: white;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10);
border-radius: 8px;
margin-bottom: 20px;
}
.option-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 16px;
border-radius: 8px;
width: 144px !important;
}
.option-new {
background: #191F3A;
color: white;
}
.option-white {
background: white;
border: 1px rgba(25, 31, 58, 0.20) solid;
color: #191F3A;
}
.option-title {
text-align: center;
font-size: 12px !important;
font-family: ‘Ubuntu Sans’, sans-serif !important;
font-weight: 600 !important;
}
.nova-arrecadacao{
color: white;
font-size: 14px;
font-family: Ubuntu Sans;
font-weight: 600;
word-wrap: break-word
}
.option-card {

height: 50px;
display: flex;
justify-content: center;
text-align: center;

}
.card-opcoes-principais{
width: 385px;
height: 204px;
position: absolute;
background: white;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10);
border-radius: 8px;
margin-left: 83px;
}

}

.value-item.opt-direita {
margin-left: 21px !important;
}
.title {
color: #1B1B1B;
font-size: 16px;
font-family: Ubuntu Sans;
font-weight: 400;
word-wrap: break-word;
margin-top: 10px;
margin-left: 10px;
}
.view-all {
color: #6C6C6C;
font-size: 12px;
font-family: Ubuntu Sans;
font-weight: 400;
word-wrap: break-word;
margin-right: 75px !important;
}

Saldo atual
R$
***********
Saldo disponível
R$
***********

Transferir
Recebido
R$ #recebido
Pago
R$ #pago
Receber
R$ #receber
Pagar
R$ #pagar
Inadimplência
R$ #inadimplencia
Resultado
R$ #resultado
99%
100%
Opções principais
Ver todas
Nova arrecadação
Acordo
Conciliação Bancária
Transferência Bancária