.component.mini-topicos .conteudo-component {display: flex; justify-content: space-between; gap: 37px}
.component.mini-topicos .conteudo-component .topico {width: 100%; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 63px 20px 44px; position: relative; border-radius: 10px; align-items: center;}
.component.mini-topicos .conteudo-component .topico .titulo {font: 500 15.2px/21.28px garet; max-width: 200px; width: 100%; text-align: center; text-transform: uppercase;}
.component.mini-topicos .conteudo-component .topico .texto {font: 400 15px/30.42px montserrat; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; text-align: center; width: 100%; max-width: 250px;}
.component.mini-topicos .conteudo-component .topico .icon {position: absolute; z-index: 1; top: 0; left: 50%; translate: -50% -50%; background: linear-gradient(45deg, #EFBA69 0%, #D69941 100%); border-radius: 50%; width: 71px; height: 71px;}
.component.mini-topicos .conteudo-component .topico .icon::before {content: ''; position: absolute; background: var(--branco); border-radius: 50%; width: 49px; height: 49px; translate: -50% -50%; top: 50%; left: 50%;}
.component.mini-topicos .conteudo-component .topico .icon svg {position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 3;}
.component.mini-topicos .preto-titulo {color: var(--cinza2);}
.component.mini-topicos .branco-titulo {color: var(--branco);}

.component.mini-topicos .preto-texto {color: var(--cinza3);}
.component.mini-topicos .branco-texto {color: var(--branco);}

.component.mini-topicos .conteudo-component .topico.claro {border: 3px solid var(--cinza4);}
.component.mini-topicos .conteudo-component .topico.escuro {border: 3px solid var(--cinza1);}

.component.mini-topicos .splide {width: 100%;}
.component.mini-topicos .splide__slide {margin: 33px 0 0;}

.component.mini-topicos .splide__arrow {width: 45px; height: 45px; right: unset; left: unset; background-color: var(--bege1);}
.component.mini-topicos .splide__arrow svg path {fill: var(--preto1);}
.component.mini-topicos .splide__arrow--next {right: 0; translate: 50% 0;}
.component.mini-topicos .splide__arrow--prev {left: 0; translate: -50% 0;}

@media (max-width: 600px) {
    .component.mini-topicos .conteudo-component .topico {max-width: 370px; margin: 0 auto;}
    .component.mini-topicos .splide__arrow {width: 30px; height: 30px;}
    .component.mini-topicos .splide__arrow--next {translate: 20% 0;}
    .component.mini-topicos .splide__arrow--prev {translate: -20% 0;}
}