@import url("public/resource/custom.css");
:root{
    --color-body:rgb(247, 247, 247);
    --color-root: rgb(255, 255, 255);
    --color-container:rgb(235, 243, 247);
    --color-border:rgb(247, 220, 199);
    --img-card-width: 400px;
    --img-card-height:225px;
}
*{
    margin: 0px;
    padding: 0px;
    position: relative;
}
body{
    background-color: var(--color-root);
}
.back-color{
    background-color: var(--color-container);
}
.border{
    border: 1px solid var(--color-border);
}
.head-logo img{
    width: 80px;
    height: 80px;
}
.card{
    width: 400px;
}
.card-body{
    position: relative;

}
.card-img img{
    width: 100%;
    height: var(--img-card-height);
    margin: 0px;
    padding: 0px;
    position: relative;
    border-radius: 10px;
}
@media(min-width:300px){
    .card{
        width: 360px;
    }
    .card-img img{
        width: 100%;
        height: 210px;
        border-radius: 10px;
    }
}
@media(min-width:600px){
    .card{
        width: 280px;
    }
    .card-img img{
        width: 100%;
        height: 170px;
        border-radius: 10px;
    }
}
@media(min-width:800px){
    .card{
        width: 360px;
    }
    .card-img img{
        width: 100%;
        height: 210px;
        border-radius: 10px;
    }
}
@media(min-width:1100px){
    .card{
        width: 350px;
    }
    .card-img img{
        width: 100%;
        height: 200px;
        border-radius: 10px;
    }
}
@media(min-width:1380px){
    .container{
        min-width: 1300px
    }
    .card{
        width: 400px;
    }
    .card-img img{
        width: 100%;
        height: var(--img-card-height);
        border-radius: 10px;
    }
}