.wpb-card {
    .card-text { font-size: 1.4rem; color: var(--clr-text-grey); }

    .card-row { display: flex; flex-wrap: wrap; gap: .5rem; }

    .card-usps { margin-top: var(--mt, 1em); list-style: none; display: flex; flex-direction: column; gap: 1.2rem; padding-top: .5rem; padding-left: 0!important;
        .card-usp { display: flex; align-items: base-line; font-weight: 600; font-size: 1.2rem; position: relative; line-height: 1.4; 
            > * { display: inline; }
            &::before { font-family: "Font Awesome 7 Pro"; --fa: "\+"; content: var(--fa) / ""; font-weight: 400; color: var(--clr-text); display: inline-grid; place-items: center; font-weight: 700; font-size: .6em; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: rgba(var(--clr-text-rgb), .2); margin-right: .6rem; }
        }
    }

    &.wpb-card--category { --border-radius: 1.2rem; overflow: hidden;
        .wpb-card__header { --linear-gradient: linear-gradient(180deg, transparent 56%, var(--clr-dark) 85%); padding: 0; bottom: 5rem; height: calc(100% - 5rem); border-radius: 0;
            img { width: 100%; height: 100%; object-fit: cover; }
        }
        .wpb-card__body { font-size: 1.4rem; margin-top: auto;
            .card-title { font-size: clamp(1.5rem, 2.5vw, 2rem); }
            .card-text { color: #fff;
                > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
            }
        }
        .wpb-card__footer { background-color: var(--clr-dark); border-top: 1px solid rgba(255,255,255,.25); padding: 0; height: 5rem; font-size: 1.4rem; font-weight: 700; display: flex; justify-content: center; align-items: center; column-gap: 1rem; 
            &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
        }
    }

    &.wpb-card--reference { --border-radius: 1.2rem; --padding: 1.6rem 0 0; background-color: transparent;
        .card-title { font-size: clamp(1.6rem, 2.5vw, 2rem); }
        p { margin: 0; font-size: 1.4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        
        .wpb-card__header { --ratio: 87%; border-radius: var(--border-radius);
            &::before { background: rgba(0,0,0,0.25); }
            > img { border-radius: var(--border-radius); }
        }

        .wpb-card__logo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 2rem; pointer-events: none;
            img { width: auto; max-width: 55%; max-height: 45%; object-fit: contain; }
        }

        .wpb-card__body { display: flex; flex-direction: column; row-gap: .8rem; padding: 2rem 0; }

        .wpb-card__footer { border-top: 1px solid var(--clr-border); }
    }

    &.wpb-card--reference-featured { --border-radius: 1.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem;
        .wpb-card__header { --ratio: 100%; border-radius: var(--border-radius); }
        .wpb-card__logo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 2rem; pointer-events: none;
            img { width: auto; max-width: 55%; max-height: 45%; object-fit: contain; }
        }
        .wpb-card__body { display: flex; flex-direction: column; align-items: start; row-gap: 1.6rem; padding: 0; }

        .card-title { font-size: clamp(2rem, 2.5vw, 2.4rem); }
        .wpb-card__footer { width: 100%; margin-top: 2rem; padding: 0; border-top: 1px solid var(--clr-border); }
    }

    &.wpb-card--article-tertiary { --border-radius: 1.2rem; --padding: 1.6rem 0 0; gap: 0;
        .card-title { font-size: clamp(1.6rem, 2.5vw, 2rem); }
        .card-text > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
        .wpb-card__header { --ratio: 65%;
            .badge-group { position: absolute; top: 0; right: 0; left: 0; padding: 2.4rem; } 
        }
        .wpb-card__body { display: flex; flex-direction: column; row-gap: .8rem; padding: 1.6rem 0; }
        .wpb-card__footer { border-top: 1px solid var(--clr-border); }
    }

    &.wpb-card--lp-category { border: 1px solid var(--clr-border);
        .card-title { font-size: 1.6rem; }  
        .wpb-card__header { --ratio: 65%;
            img { object-fit: contain; }
        }
        .wpb-card__footer { border-top: 1px solid var(--clr-border); padding: 1rem 2rem; text-align: center; }
    }

    &.wpb-card--product { border: 1px solid var(--clr-border);
        .card-title { font-size: 1.6rem; margin-top: .5em; }
        .prd-attributes  { border-top: .1rem solid var(--clr-border); padding: 1.6rem 0 0 0; margin-top: 1.6rem;
            .prd-attribute { line-height: 1; 
                .prd-attribute__label { display: flex; align-items: center; padding-bottom: .4rem;
                    img { width: .9rem; height: .9rem; margin-right: .4rem; }
                    small { display: block; font-size: 1.1rem; line-height: 1; font-weight: 500; color: var(--clr-text-grey); opacity: .8; }
                }
                .prd-attribute__info {
                    span { font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--clr-text-grey); display: block; }
                }
                + .prd-attribute { margin-top: 1rem; }
            }
        }
        
        .wpb-card__header { --ratio: 60%; position: relative;
            .badge-group { position: absolute; top: 0; right: 0; left: 0; padding: 2rem 2rem 0 2rem; }
            img { height: 100%; object-fit: contain; }
        }
        .wpb-card__body {}
        .wpb-card__footer {
            .btn { justify-content: center; width: 100%; }
        }
    }

    
    @media (min-width: 768px) {
        &.wpb-card--reference-featured { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 4.4rem; align-items: center; }
    }

    @media (min-width: 1200px) {
        &.wpb-card--reference-featured { grid-template-columns: minmax(0, 49.3rem) minmax(0, 1fr); gap: 6.4rem; 
            .wpb-card__footer { margin-top: 3.2rem; }
        }
    }
}