/* CSS adicional para corrigir problemas de imagens cortadas */


/* Força o comportamento correto das imagens */
.imagem-frase img,
.bloco-frase img,
.frase-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background-color: #ffffff !important;
    max-height: 400px !important;
    min-height: 200px !important;
}


/* Ajustes específicos para diferentes tipos de containers */
.bloco-frase .imagem-frase {
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Garantir que as imagens não sejam cortadas em nenhuma situação */
img[src*="motivacionais"],
img[src*="amor"],
img[src*="bom-dia"],
img[src*="boa-noite"],
img[src*="reflexao"] {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    background-color: #ffffff !important;
}

/* Responsividade específica para imagens */
@media (max-width: 768px) {
    .imagem-frase img,
    .bloco-frase img,
    .frase-card img {
        max-height: 300px !important;
        min-height: 160px !important;
    }
}

@media (max-width: 480px) {
    .imagem-frase img,
    .bloco-frase img,
    .frase-card img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: none !important;
    }
}

/* Evitar que JavaScript ou outros CSS sobrescrevam */
.imagem-frase img[style] {
    object-fit: contain !important;
    height: auto !important;
}

/* Ajuste para imagens que podem estar sendo carregadas dinamicamente */
.imagem-frase img:not([src]),
.imagem-frase img[src=""] {
    display: none !important;
}

/* Container das imagens deve manter proporção */
.imagem-frase {
    aspect-ratio: auto !important;
    height: auto !important;
}

/* Evitar overflow que pode causar cortes */
.bloco-frase,
.frase-card {
    overflow: visible !important;
}

.imagem-frase {
    overflow: hidden !important;
    border-radius: 0px !important;
}