.component.qualidades {display: flex; width: 100%; justify-content: space-between;}
.component.qualidades .qualidade {display: flex; gap: 16px;}
.component.qualidades .qualidade .icon {display: flex; justify-content: center; align-items: center; aspect-ratio: 1; background-color: var(--amarelo1); border-radius: 50%; width: 55.4px; height: 55.4px;}
.component.qualidades .qualidade .texto {font: 400 18.39px/1.366 montserrat; color: var(--cinza3);}
.component.qualidades .qualidade .texto em {font: 400 18.39px/1.366 montserrat; color: var(--cinza3);}

@media (max-width: 1100px) {
    .component.qualidades .qualidade {gap: 8px;}
}

@media (min-width: 991px) {
    .component.qualidades .splide.slider {width: 100%;}
    .component.qualidades .splide__list {justify-content: space-between; width: 100%;}
    .component.qualidades .splide__slide {width: fit-content !important;}

    @media (max-width: 1100px) {
        .component.qualidades .splide__list {flex-wrap: wrap; gap: 20px; justify-content: center;}
        .component.qualidades .splide__slide {margin: 0 40px;}
    }
}

@media (max-width: 990px) {
    .component.qualidades {flex-wrap: wrap; justify-content: center; gap: 15px;}
    .component.qualidades .qualidade {flex: 0 0 100%; max-width: 90%; align-items: center; justify-content: center; padding: 10px; border: 2px solid var(--branco); border-radius: 10px; width: 100%; margin: 0 auto; height: 100%;}
    .component.qualidades .splide__slide {display: flex; align-items: center;}
    .component.qualidades .splide__arrow {background-color: var(--amarelo1);}
    .component.qualidades .splide__arrow svg path {fill: var(--preto1);}
    .component.qualidades .qualidade .texto {height: fit-content;}

    .component.qualidades .splide__arrow.splide__arrow--prev {left: -2em;}
    .component.qualidades .splide__arrow.splide__arrow--next {right: -2em;}
}

@media (max-width: 700px) {
    .component.qualidades .qualidade {flex-direction: column; align-items: center; margin: 0 auto;}
    .component.qualidades .qualidade .texto {text-align: center;}
}

@media (max-width: 550px) {
    .component.qualidades .splide__arrow.splide__arrow--prev {left: -0px;}
    .component.qualidades .splide__arrow.splide__arrow--next {right: -0px;}
}