@media (min-height: 860px) {
    .show-on-tall-screens {
        display: flex !important;
    }
}

.show-on-tall-screens {
    display: none;
}


.lista-notaveis .item-notaveis .imgHoverNotaveis {
    position: relative;
}


@media only screen and (min-width: 768px) {

    .lista-notaveis .item-notaveis .imgHoverNotaveis::before,
    .lista-notaveis .item-notaveis .imgHoverNotaveis::after {
        content: ' ';
        position: absolute;
        display: block;
        /* width: 285px;
        height: 288px; */

        width: 100%;
        height: 100%;

        background: url('../img/notavel-before.webp');
        /* Para o ::before */
        top: 0;
        /* Começa do centro */
        left: 0;
        /* Começa do centro */
        background-repeat: no-repeat !important;
        opacity: 0;
        z-index: 0;
        transition: all 0.5s ease-in-out;
        /* Transição suave */
    }

}

@media only screen and (max-width: 768px) {

    .lista-notaveis .item-notaveis .imgHoverNotaveis::before,
    .lista-notaveis .item-notaveis .imgHoverNotaveis::after {
        content: ' ';
        position: absolute;
        /* display: block; */
        /* width: 285px; */
        /* height: 288px; */

        /* width: 100%; */
        /* height: 100%; */

        /* background: url('../img/notavel-before.webp'); */
        background-size: 85% !important;
        background-size: cover;
        /* Para o ::before */
        /* top: 0; */
        /* Começa do centro */
        /* left: 0; */
        /* Começa do centro */
        background-repeat: no-repeat !important;
        opacity: 0;
        /* z-index: 0; */
        transition: all 0.5s ease-in-out;
        /* Transição suave */
    }
}



.lista-notaveis .jose-pastore .imgHoverNotaveis::after {
    background: url('../img/after-jose-pastore.webp');
    /* Imagem do ::after */
}

.lista-notaveis .jose-goldemberg .imgHoverNotaveis::after {
    background: url('../img/after-jose-goldemberg.webp');
    /* Imagem do ::after */
}

.lista-notaveis .abram-szajman .imgHoverNotaveis::after {
    background: url('../img/after-abram.webp');
    /* Imagem do ::after */
}

.lista-notaveis .ives-gandra .imgHoverNotaveis::after {
    background: url('../img/after-ives.webp');
}




/* Before */
.lista-notaveis .jose-pastore .imgHoverNotaveis::before {
    background: url('../img/before-jose-pastore.webp');
}

.lista-notaveis .jose-goldemberg .imgHoverNotaveis::before {
    background: url('../img/before-jose-goldemberg.webp');
}

.lista-notaveis .abram-szajman .imgHoverNotaveis::before {
    background: url('../img/before-abram.webp');
}

.lista-notaveis .ives-gandra .imgHoverNotaveis::before {
    background: url('../img/before-ives.webp');
}




@media only screen and (min-width: 768px) {
    .lista-notaveis .item-notaveis:hover .imgHoverNotaveis::before {
        top: -30px;
        left: -24px;
        opacity: 1;
        z-index: 0;

        background-position: top left;
        background-size: 96% !important;
    }

    .lista-notaveis .item-notaveis:hover .imgHoverNotaveis::after {
        top: auto;
        bottom: -30px;
        right: -24px;
        left: auto;
        opacity: 1;
        z-index: 0;

        background-position: right bottom;
        background-size: 96% !important;
    }
}

@media only screen and (max-width: 768px) {

    /* Quando o item estiver ativo no mobile (ou quando houver hover no desktop) */
    .lista-notaveis .item-notaveis.active-notavel .imgHoverNotaveis::before {
        top: -30px;
        left: -24px;
        opacity: 1;

        width: 285px;
        height: 288px;

        background-position: left top;
        background-size: cover !important;
    }

    .lista-notaveis .item-notaveis.active-notavel .imgHoverNotaveis::after {
        content: ' ';
        position: absolute;
        opacity: 1;

        width: 285px;
        height: 288px;

        background-position: right bottom;
        background-size: cover !important;

        top: auto !important;
        bottom: -30px !important;
        /* right: -22px !important; */
        left: calc(100% - 261px);
        z-index: 8;
        transition: all 0.5s ease-in-out;
    }
}




.lista-notaveis .item-notaveis img {
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
    /* Transição suave do grayscale */
    position: relative;
    z-index: 10;
}

.lista-notaveis .item-notaveis:hover img {
    position: relative;
    z-index: 10;
    filter: grayscale(0%);
}

.lista-notaveis .item-notaveis .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .item-notaveis:hover .btn-notavel {
    background-color: white;
    color: #AE5138;
    border-color: #AE5138;

    box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
}

.lista-notaveis .active-notavel:hover .btn-notavel {
    background-color: white;
    color: #4e6630;
    border-color: #4e6630;

    box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
}






/* Abram */
.lista-notaveis .abram-szajman .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .abram-szajman:hover .btn-notavel {
    background-color: white;
    color: #4e6630;
    border-color: #4e6630;

    box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
}

/* Final Abram */





/* Ives */
.lista-notaveis .ives-gandra .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .ives-gandra:hover .btn-notavel {
    background-color: white;
    color: #AE5138;
    border-color: black;

    box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
}

/* Final Ives */


/* Em breve */
.lista-notaveis .jose-goldemberg .btn-notavel,
.lista-notaveis .jose-pastore .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .jose-goldemberg:hover .btn-notavel,
.lista-notaveis .jose-pastore:hover .btn-notavel {
    background-color: white;
    color: #AE5138;
    border-color: #AE5138;

    box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
}

/* Final Em breve */





/* Ives Vida Literaria */
.after-vida-literaria::after {
    content: ' ';
    position: absolute;
    display: block;
    width: 100%;
    height: 106%;
    background: url('../img/elemento-vida-literaria-Ives-Gandra.jpg') right;
    top: -15px;
    right: 0px;
    bottom: -15px;
    background-repeat: no-repeat !important;
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

@media(min-width: 768px) {
    .after-vida-literaria::after {
        width: 85%;
        right: -15px;
    }
}

/* A Musica Jose Pastore */

@media(min-width: 768px) {
    .after-a-musica::after {
        content: ' ';
        position: absolute;
        display: block;
        width: 85%;
        height: 107%;
        background: url('../img/elemento-a-musica-jose-pastore.jpg') right;
        background-size: cover;
        top: -30px;
        right: -30px;
        bottom: 0;
        background-repeat: no-repeat !important;
        z-index: 0;
        transition: all 0.5s ease-in-out;
    }
}



/* Elemento Jose Goldemberg */
.after-trajetoria-politica-j-goldemberg::after {
    content: ' ';
    position: absolute;
    display: block;
    width: 85%;
    height: 81%;
    background: url('../img/elemento-trajetoria-politica-jose-goldemberg.jpg') left;
    background-size: contain;
    top: 0px;
    left: -30px;
    background-repeat: no-repeat !important;
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

@media (min-width: 1280px) {
    .after-trajetoria-politica-j-goldemberg::after {
        top: 10%;
    }
}

@media (min-width: 1537px) {
    .after-trajetoria-politica-j-goldemberg::after {
        left: 15px;
    }
}


/* Elemento Abram Sjazam */
.after-vidas-transformadas-abram::after {
    content: ' ';
    position: absolute;
    display: block;
    width: 100%;
    height: 35%;
    background: url('../img/elemento-vidas-transformadas-abram.jpg') left;
    background-size: 92%;
    background-position: center;
    top: -12%;
    left: 0;
    background-repeat: no-repeat !important;
    z-index: 0;
    transition: all 0.5s ease-in-out;
}

@media (min-width: 1280px) {
    .after-vidas-transformadas-abram::after {
        top: -12%;
    }
}

@media (min-width: 1537px) {
    .after-vidas-transformadas-abram::after {
        top: -13%;
    }
}




























/* Mobile */


.lista-notaveis .item-notaveis-mobile img {
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
    /* Transição suave do grayscale */
    position: relative;
    z-index: 10;
}

.lista-notaveis .item-notaveis-mobile:hover img {
    position: relative;
    z-index: 10;
    filter: grayscale(0%);
}

.lista-notaveis .item-notaveis-mobile .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .item-notaveis-mobile:hover .btn-notavel {
    background-color: white;
    color: #AE5138;
    border-color: #AE5138;

    box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
}


/* Abram */
.lista-notaveis .abram-szajman .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .abram-szajman:hover .btn-notavel {
    background-color: white;
    color: #4e6630;
    border-color: #4e6630;

    box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(78, 102, 48, 1);
}

/* Final Abram */





/* Ives */
.lista-notaveis .ives-gandra .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .ives-gandra:hover .btn-notavel {
    background-color: white;
    color: #AE5138;
    border-color: black;

    box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
}

/* Final Ives */


/* Em breve */
.lista-notaveis .jose-goldemberg .btn-notavel,
.lista-notaveis .jose-pastore .btn-notavel {
    padding: 10px 10px;
    display: block;
    border: 2px solid black;
    background-color: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.lista-notaveis .jose-goldemberg:hover .btn-notavel,
.lista-notaveis .jose-pastore:hover .btn-notavel {
    background-color: white;
    color: #AE5138;
    border-color: #AE5138;

    box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -webkit-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(174, 81, 56, 1);
}



/* Estilo base */
.lista-notaveis .imgOffImage {
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    transition: background-size 0.5s ease-in-out;
}

/* Camada para transição da imagem de fundo */
.lista-notaveis .imgOffImage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Quando a classe active-notavel é ativada */
.lista-notaveis .jose-pastore.active-notavel .imgOffImage::before {
    background-image: url('../img/jose-pastore/efeito-pastore.webp');
    opacity: 1;
}

.lista-notaveis .jose-goldemberg.active-notavel .imgOffImage::before {
    background-image: url('../img/jose-goldemberg/efeito-goldenberg.webp');
    opacity: 1;
}

.lista-notaveis .abram-szajman.active-notavel .imgOffImage::before {
    background-image: url('../img/abram/efeito-abram.webp');
    opacity: 1;
}

.lista-notaveis .ives-gandra.active-notavel .imgOffImage::before {
    background-image: url('../img/ives/efeito-ives.webp');
    opacity: 1;
}

/* Para mobile, manter as mesmas propriedades */
.lista-notaveis .item-notaveis-mobile.active-notavel .imgOffImage::before {
    background-size: contain;
    background-repeat: no-repeat;
}