body {
    background-color: rgb(209, 200, 173);
}

main {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    & .container {

        & h1 {
            color: rgb(24, 22, 22);
        }

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem 2rem;
        flex-direction: column;

        & .card {
            margin-top: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 40rem;
            width: 30rem;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
            border-radius: 1rem;
            background-color: white;



            & .image {
                background-image: url(../project-2/images/model.webp);
                height: 35rem;
                width: 25rem;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                border-radius: 0.6rem;
                
            }

          

            & i{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0);
                font-size: 7rem;
                color: white;
                opacity: 0;
                transition: transform ease 0.5s;
            }

        }
    }

}