Alguém me ajuda a deixar esse html responsivo?

}

.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 <em>/

}

.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;

/</em> Add additional styles for checkmark <em>/

}

.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;

/</em> Default color, adjust based on context <em>/

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;

/</em> Linha vertical <em>/

}

.value-item:last-child {

border-right: none;

/</em> Remove a borda do último item <em>/

}

.col-md-3.ct-saldo {

padding: 0px;

}

.col-md-4.valoresGerais{

padding: 0px !important;

}

.ct-saldo .card {

margin-bottom: 0;

/</em> Remove a margem inferior do Card 1 <em>/

}

.card-totais-gerais {

margin-top: 0;

/</em> Remove a margem superior do Card 2 <em>/

}

.percentage.green .percent-value {

color: green;

}

/<em>calendário</em>/

input#daterange {

background: #ffffff url(‘calendar.png’) no-repeat 10px center;

/</em> Ajuste a imagem e a posição <em>/

background-size: 20px;

/</em> Ajuste o tamanho da imagem <em>/

height: 30px !important;

border: 1px solid #d2d2d2;

padding-left: 35px;

/</em> Espaço para a imagem <em>/

width: 300px;

/</em> Ajuste a largura aqui <em>/

}

.input-datapick {

width: 240px;

/</em> Ajuste a largura aqui <em>/

}

input#daterange {

background: #ffffff url(‘bankline/calendar.png’) no-repeat 10px center;

/</em> Ajuste a imagem e a posição <em>/

background-size: 20px;

/</em> Ajuste o tamanho da imagem <em>/

height: 30px !important;

border: 1px solid #d2d2d2;

padding-left: 35px;

/</em> Espaço para a imagem <em>/

width: 300px;

/</em> Ajuste a largura aqui <em>/

margin-top: -30px;

}

.input-datapick {

width: 240px;

/</em> Ajuste a largura aqui <em>/

}

.custom-margin-bottom {

margin-bottom: 20px;

/</em> Ajuste conforme necessário */

}

/<em>Opções principais</em>/

.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;

}