#accueil-blog-title{
    font-size:4.5rem;
}

.blog-cta{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    padding-top:50px;
    & button{
        padding: 15px 50px;
    }
}

.page-blog{
    padding: 50px 80px;

    & h1{
        font-size:4rem;
        line-height:1.1;
        padding: 20px 0;
    }

    & .blog-container{
        margin:30px 0;
        display:flex;
        flex-wrap:wrap;
        justify-content: space-between;

        & .blog-item{
            width:30%;
            box-shadow: rgba(0, 0, 0, 0.061) 0px 0px 20px;
            padding:15px;
            margin:20px 0;

        }
        
        & img{
            width:100%;
            aspect-ratio: 16/9;
            height:250px;
            object-fit: cover;
        }
    }

    & h2{
        font-family:'Didot';
        font-size:1.6rem;
        line-height:1;
        color:var(--black);
        padding:10px 0 5px 0;
    }

    & p{
        font-size:1rem;
        padding: 5px 0 0 0;
    }

    & a p{
        font-family:'ProximaNovaBold';
        font-size:1rem;
        color:var(--orange);
        padding: 5px 0;
    }
}

/* ---------------- responsive -------------------- */
@media screen and (max-width:1280px){
    .page-blog{
        & .blog-container{
            & .blog-item{
                width:28%;
            }
        }
    }
}

@media screen and (max-width:1024px){
    #accueil-blog-title{
        font-size:3.5rem;
    }
    .page-blog{
        & .blog-container{
            & .blog-item{
                width:44%;
            }
        }
    }
}

@media screen and (max-width:768px){
    #accueil-blog-title{
        font-size:3rem;
    }
    .page-blog{
        padding:50px;

        & h1{
            padding: 0;
            font-size:3.5rem;
        }

        & .blog-container{
            & .blog-item{
                width:100%;

                & img{
                width:100%;
                aspect-ratio: 16/9;
                height:180px;
                object-fit: cover;
                }
            }

    & h2{
        font-size:1.2rem;
        padding:10px 0 5px 0;
    }

    & p{
        font-size:0.9rem;
        padding: 5px 0 0 0;
    }

    & a p{
        font-size:0.9rem;
        padding: 5px 0;
    }

        }
    }
}

@media screen and (max-width:480px){
     #accueil-blog-title{
        font-size:2.8rem;
    }

    .blog-cta{
        padding-top:20px;
    }
    
    .page-blog{
        padding:30px;

        & h1{
            padding: 0;
            font-size:3rem;
        }

        & .blog-container{
            margin:0;
            & .blog-item{
                width:100%;
                margin:10px 0;
                & img{
                height:120px;
                }
            }

        }
    }
}