@media (max-width:870px) {
    .homeContainer{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .cardCustom {
        height: 300px;
        width: 300px;

    }
    .templateCard img {
        width: 300px;
    }
    #Blog .blogCard {
        width: 316px;
    }
    #Blog .blogCard h4 {
        font-size: 16px;
    }
    #Blog .blogCard p {
        font-size: 10px;
    }
    #Blog .blogCard button{
        font-size: 12px;
    }

    #Footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    #Footer ul{
        padding-left: 0;

    }

    #Footer .col-4{
        width: 100%;
    }

    header{
        width: 300px !important;
        right: 0;
        top:50px !important;
        display: flex;
        flex-direction: column;
    }

    nav ul{
        flex-direction: column;
        align-items: flex-end;
    }

}