*,::before,::after{
    box-sizing:border-box;
}
html{
    scroll-behavior: smooth;
 }
body{
    margin:0;
    padding:0;
    border:0;
    outline: 0;
    box-sizing: border-box;
    list-style:none;
    text-decoration: none;
    font-family: sans-serif;
    font-size:1rem;
}
h1,p{
    margin:0;

}
a{
    text-decoration: none;
}
img{
    max-width:100%;
    height:auto;
}

.container{
    height:100vh;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: bisque;
    overflow: hidden;
}

.card{
    width:320px;
    height:400px;
    background-color: rgba(165, 42, 42, 0.218);
    border-radius: 2rem;
    padding:4rem 2rem 0;
    color:white;
    overflow:hidden;
}
.card-img{
    position: absolute;
    width:260px;
    filter:drop-shadow(5px 10px 15px rgba(8,9,13,.4))
}
.card-data{
    transform: translateY(13.2rem);
    text-align: center;
    font-size: 0.8rem;
}
.card-button{
    background-color: rgba(165, 42, 42, 0.392);
    color: brown;
    display:block;
    padding:1.125rem 2rem;
    border-radius: 0.5rem;
}