/* CSS para 3D Flip Image com texto */
/* O recipiente de flip box - defina a largura e altura para o que você quiser. Nós adicionamos a propriedade border para demonstrar que o flip em si sai da caixa em foco (remova a perspectiva se você não quiser o efeito 3D*/
.flip-box {
    background-color: transparent;
    width: 100%;
    height: 300px;
    perspective: 1000px; /* Remova isso se você não quiser o efeito 3D */
    margin-left: 190px;
}

@media (max-width: 768px){
    .flip-box {
        background-color: transparent;
        width: 100%;
        height: 300px;
        perspective: 1000px; /* Remova isso se você não quiser o efeito 3D */
        margin-left: 0px;
        margin-bottom: 20px;
    }
}

/* Este recipiente (container) é necessário para posicionar a frente e o verso */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

/* Faça um movimento horizontal ao mover o mouse sobre o contêiner de flip box */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Posicione a frente e o verso */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Estilo do lado da frente (fallback se a imagem estiver faltando) */
.flip-box-front {
    background-color: #bbb;
    color: black;
    width: 100%;

}

/* Estilo no verso */
.flip-box-back {
    color: black;
    transform: rotateY(180deg);
    /*background-color: #FFD400;*/
    background-color: #FFF001;
    position: absolute;
    width: 100%;
    height: 300px;
    box-shadow: 2px 15px rgba(0,0,0,0.08);
}