.card {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
    box-shadow: var(--shadow-style);
    background: #ffffff99;
    border-radius: 0.3em;
    width: 20em;
    /*background:#f3f3f3;
    border:0.06em solid #e0e0e0;*/
}

.cardtitle {
    display:grid;
    grid-template-columns:40% 60%;
}

    .cardtitle div.h2-title {
        font-size: 1.8em;
        color: var(--title-black);
    }

.cardbody .bodytext{
    display:flex;
    font-size:1.2em;
    padding:1em;
    color:#333;
    justify-content:space-around;
}

.cardbody ul {
    list-style: none;
    text-align: left;
}

    .cardbody ul li {
        display: block;
        width: 100%;
        font-size: 1em;
        margin: 0.8em 0;
        color:var(--primary-color);
    }

        .cardbody ul li i {
            margin-right: 0.5em;
            color: var(--Primary-color);
            font-size: 1.2em;
            font-weight: 600;
        }

.cardfooter {
    padding: 0 1em;
}

    .cardfooter button {
        display: none;
    }

.cardstrip {
    display: grid;
    gap: 3em;
}

@media only screen and (max-width:640px) {

    .cardtitle img {
        height:50pt;
        width: auto;
    }

    .cardbody ul li {        
        font-size: 1.2em;
    }
}

@media only screen and (max-width:360px) {
    .card {
        width:80%;
    }
}