.featured-card {
    width: 100%;
    position: relative;
    max-width: 448px;
    min-width: 360px;
    overflow: hidden;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    background-color: #006b70;
    padding-bottom: 2rem;
}

.featured-card-bg {
    position: absolute;
}

.image {
    width: 100%;
}

.featured-card-gradient-mask {
    background: linear-gradient(0deg,
            rgba(0, 107, 112, 1) 0%,
            rgba(0, 107, 112, 1) 24%,
            rgba(0, 55, 72, 0) 60%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 560px;
}

.featured-card-text {
    position: relative;
    margin-top: 20rem;
    padding: 0 1rem;
}

.featured-card-title {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 6rem;
}

.featured-card-title h3 {
    color: var(--main-text-color-contrast);
}

.featured-card-body {
    color: var(--main-text-color-contrast);
}


/* Featured Icons Card */

.featured-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 448px;
    min-width: 264px;
    padding: 2rem;
    border-radius: 2rem;
    background: linear-gradient(0deg,
            #FcFEFC 0%,
            #FcFEFC 25%,
            #fffdfe 100%);
    box-shadow: 0 5px 8px rgb(0 0 0 / 5%);
}

.icon-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 244px;
}

.icon-card-text {}

.icon-card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-items: center;
    height: 5rem;
}

.icon-card-title h4 {
    font-size: 1.5rem;
}

.icon-card-body {}




/* screen */
/* 768px  */
/*  */
/* */


@media only screen and (max-width: 768px) {


    .featured-card-text {
        margin-top: 20rem;
    }

    .featured-card-gradient-mask {
        height: 450px;
    }
}



/* screen */
/* 440px  */
/* */
/* */

@media only screen and (max-width: 440px) {

    .featured-card {
        min-width: 20rem;
        max-width: 24rem;
    }


    .featured-card-text {
        margin-top: 20rem;

    }
}