body {max-width:1200px}

a:link {color:#444;text-decoration:none;}
a:visited {color:#444;text-decoration:none;}
a:hover {color:#551A8B;text-decoration:none;}
a:active {text-decoration:none;}

#img-card-1{width:100%;height:25ch;}

#img_filme {width:170px;height:210px;border:4px solid #ccc;margin:5px;float:right;}

#img-slide-1{width:100%;}
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.w3-sidenav a {font-family: "Roboto", sans-serif}
body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;}





/* Grid de filmes */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Limitado a 4 colunas em tela grande */
    gap: 20px;
}

/* Filme Card */
.movie-card {
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    /* border-radius: 5px; */
    transition: transform 0.1s ease-in-out;
}
.movie-card:hover {
    transform: scale(1.03);
}

/* Imagem do Filme */
.movie-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para manter a proporção da imagem */
    transition: filter 0.1s ease-in-out;
}
.movie-card:hover img {
    filter: brightness(50%); /* Reduz o brilho da imagem ao passar o mouse */
}

/* Ícone de reprodução */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}
.movie-card:hover .play-icon {
    opacity: 1;
}

/* Grid de filmes em tela média (4 colunas) */
@media screen and (max-width: 1024px) {
    .movie-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Grid de filmes em tela pequena (2 colunas) */
@media screen and (max-width: 768px) {
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}