@media (max-width: 800px) {

    header h1 {
        text-align: center;
    }
    main section p {
    width: 80%;
    font-size: 1.4rem;
    text-align: center;
    }

    main {
        
        & div.grid {
            grid-template-columns: 100%;

            & a {

                display: flex;
                justify-content: center;
                & .card {
                    width: 90vw;
                    height: 90vw;
                }
            
            }
            
        } 

        & .box-poster img.poster {
            width: 100vw;
            height: auto;
        }
    }

    main section {

        & h2 {
            font-size: 2rem;
        }

        &#presentation .grid {
            grid-template-columns: 100%;
            grid-template-rows: 25% 25% 25% 25% ;

            & .card p {
                margin: 0 auto;
            }

        }
        & .grid {
            grid-template-columns: 100%;
            
        } 

        & .discover a button {
            font-size: 1.5rem;
            padding: 20px 35px;
        }

        

        & h3 {
            width: 90%;
            text-align: center;
            font-size: 1.5rem;
        }
        & p {
            width: 80%;
            font-size: 1.3rem;
            line-height: 1.6rem;
            letter-spacing: 1px;
        }

        & i {
            width: 80%;
            font-size: 1.3rem;
            line-height: 1.6rem;
            letter-spacing: 1px;
            
        }

        & img {
            width: 100%;
        }
    } 





    
footer {
    width: 90%;
    height: 4lvh;

    display: flex;
    flex-direction: column;
    align-items: center;
    border: var(--rougeTheme) 2px solid;
    border-bottom: none;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: relative;
    bottom: 0lvh;

    overflow-y: hidden;

    margin: 0 auto;
    transition: 0.7s;

    &:hover {
        height: 10lvh;
        transform: translateY(-7lvh);
        
    }



    & #bandeau {
        margin-top: 2lvh;   
        display: flex;
        flex-direction: column;
        align-items: center;

        & div#link-box {
            flex-direction: column;
        }

        
        & .stick {
            width: 5vw;
            height: 3px;
            background-color: var(--rougeTheme);
            z-index: 99;
            margin-bottom: 2lvh;
    
        }
    }
}

}