.card-container { container: card-container / inline-size; 
    .wpb-card { height: 100%; }
}

.wpb-card { --br: .6rem; --p: 2rem; border-radius: var(--br); border: 1px solid var(--clr-border); display: flex; flex-direction: column; position: relative; text-decoration: none; 
    a { text-decoration: none; }
    .wpb-card__header { display: flex; overflow: hidden; 
        img { width: 100%; height: auto; }

        &.wpb-card__header--ratio { --ratio: 75%; position: relative; overflow: hidden; z-index: 1;
            &::before { content: ''; display: block; width: 100%; padding-top: var(--ratio); }
            > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
        }
        &.wpb-card__header--scale { overflow: hidden;
            img { transition: transform var(--ts-35) ease; }
        }
        &.wpb-card__header--absolute { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: var(--br); overflow: hidden;
            img { width: 100%; height: 100%; object-fit: cover; }
            &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
        }

        .wpb-card__header__text { color: #fff; position: absolute; right: 0; bottom: 0; left: 0; padding: var(--p);
            * { color: #fff; }
        }
    }
    .wpb-card__body { padding: var(--p); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
    .wpb-card__footer { padding: var(--p); padding-top: 0; }

    .card-label { font-size: 1.3rem; line-height: 1; font-weight: 700; text-transform: uppercase; opacity: .8; }    
    .card-title { display: block; font-size: 2rem; line-height: 1.4; font-weight: 500; margin-top: 1rem; }
    .card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.6rem; line-height: 1.5; margin-top: 1.6rem; margin-bottom: 2rem; opacity: .7; }
    .card-link { font-size: 1.6rem; line-height: 1; font-weight: 600; margin-top: 2rem; display: flex; align-items: center; column-gap: .6rem; 
        i { font-size: 1.2rem; }
        &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
    }

    > *:first-child { border-top-left-radius: var(--br); border-top-right-radius: var(--br); 
        img { border-top-left-radius: var(--br); border-top-right-radius: var(--br); } 
    }
    > *:last-child { border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); }

    &:hover .wpb-card__header--scale {  
        img { transform: scale(1.1); }
    }

    &:has(.wpb-card__header--absolute) { z-index: 1; }

    /* Background colors */
    &.wpb-bg-clr--secondary :is(.card-label, .card-title, .card-link) { color: #fff; }

    /* Variations */
    &.wpb-card--blurb { border: none; 
        display: flex;
        flex-direction: column;
        height: 100%;

        .wpb-card__header { border-radius: var(--br);
            img { aspect-ratio: 16/9; object-fit: cover; }
        }
        .wpb-card__body {--p: 2rem; padding: var(--p) 0; flex-grow: 1;
            .wpb-icon { --w: 4.2rem; --h: 4.2rem; --clr: var(--clr-primary);}
        }
        .wpb-card__footer {padding: 0; border-top: 2px solid var(--clr-blue-300);}

        @media (min-width: 768px)  {
            .wpb-card__body {--p: 3.2rem; 
                .wpb-text { margin-top: var(--mt); }
            }
        }
    }

    &.wpb-card--usp {--p: 3.2rem; border: none; background-color: var(--clr-porcelain-800);
        .wpb-card__header { display: flex; gap: 1rem; align-items: center; padding: var(--p); padding-bottom: 0; 
            .wpb-icon { --w: 3.7rem; --h: 3.7rem; --clr: var(--clr-primary); }
            .card-title {margin: 0; font-weight: 800;}
        }
        .wpb-card__body {padding-top: calc(var(--p) / 4);}
    }

    &.wpb-card--article { --br: .6rem; border-bottom-right-radius: var(--br-xl); border: none;
        .wpb-card__header { --ratio: 78%; border-bottom: .2rem solid #25507C; }
        .wpb-card__body { color: #fff; padding: 1.4rem 2.4rem 2rem 2.4rem; }
        .card-title { color: #fff; }
    }

    &.wpb-card--article-extended { --br: .6rem; border-bottom-right-radius: var(--br-xl); border: none;
        .wpb-card__header { --ratio: 78%; max-height: 33.4rem; }
        .wpb-card__body { color: #fff; padding: 1.4rem 2.4rem 2rem 2.4rem;
            
        }
        .card-title { color: #fff; }
    }

    &.wpb-card--webinars { min-height: 41.4rem;
        .wpb-card__header::after { background: linear-gradient(180deg, rgba(12, 27, 49, 0) 50%, rgba(12, 27, 49, 0.7) 85.44%, rgba(12, 27, 49, 0.8) 100%); }
        .wpb-card__body { margin-top: auto; flex-grow: 0; }
    }

    &.wpb-card--case-study { border: none; background-color: var(--clr-porcelain); border-radius: .6rem .6rem 8rem .6rem;
        .wpb-card__header { border-bottom: .2rem solid var(--clr-blue-700);
            &::before { background: linear-gradient(180deg, rgba(12, 27, 49, 0) 50%, rgba(12, 27, 49, 0.7) 85.44%, rgba(12, 27, 49, 0.8) 100%);}
        }
        .card-title { font-size: 3.2rem; font-weight: 800; line-height: 1; }
        .card-label { opacity: 1; }
        .card-description { font-size: 2rem; line-height: 1.4; font-weight: 500; }
        .card-link { color: var(--clr-primary); }
        .card-flag { position: absolute; top: var(--p); left: var(--p); width: 3.6rem;
            img { border-radius: .2rem!important; }
        }
    }

    &.wpb-card--case-study-grid {--p: 3.2rem; border: none; padding: var(--p); text-decoration: none; height: 100%;
        .wpb-card__header { display: flex; flex-direction: column; border-bottom: 2px solid var(--clr-blue-700);
            .wpb-flag { margin-bottom: 6.8rem;}
            .wpb-card__header__text { position: relative; padding: 0; padding-bottom: 2rem;
                .card-title { font-size: 3.2rem; font-weight: 800; line-height: 1; }
                .card-label { opacity: 1; color: var(--clr-blue-500); }
            } 
        }
        .wpb-card__body { padding: 2rem 0;
            .wpb-text { font-size: 2rem; line-height: 1.4; --excerpt-line-clamp: 2; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color: #fff;}

        }
        .wpb-card__footer { padding: 0; padding-top: 1.2rem;
            .btn {font-size: 1.6rem;}
        }
    }

    &.wpb-card--references {--p: 4rem; border: 2px solid var(--clr-porcelain); border-bottom-right-radius: var(--br-xl);
        .wpb-card__header { display: flex; gap: 2.8rem; align-items: center; flex-wrap: wrap; padding: var(--p); padding-bottom: 0;
            .wpb-image { overflow: hidden; max-width: 9.2rem;
                img { border-radius: 0.4rem; border-top-left-radius: 3.2rem; }
            }
            .wpb-content { display: flex; flex-direction: column; 
                .wpb-content__title {font-size: 2.4rem; font-weight: 700; color: var(--clr-blue);}
                .wpb-content__job {font-size: 1.3rem; text-transform: uppercase; max-width: 32rem; font-weight: 600;  color: var(--clr-primary);}
            }
        }
    }

    &.wpb-card--shortcode { --br: 1.6rem; --p: 4rem; border-bottom-right-radius: var(--br-xl); border: none; background-color: #fff; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
        .wpb-card__body { padding: var(--p); 
            .card-title {max-width: 26rem; font-weight: 800; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; margin-bottom: 2rem;}
        }
    }

    &.wpb-card--whitepaper { border: none; background-color: var(--clr-porcelain); display: grid; grid-template-columns: 3fr 1fr;
        .wpb-card__header { border-radius: 0 var(--br) var(--br) 0!important; 
            img { object-fit: cover; }
        }
        .wpb-card__body { display: flex; flex-direction: column; }
        .card-label { color: var(--clr-blue-700); opacity: .8; }
        .card-title { font-size: 2rem; font-weight: 700; margin-bottom: 1em; }
        .card-link { color: var(--clr-primary); margin-top: auto; }
    }

    &.wpb-card.wpb-card--download { border: none; background-color: var(--clr-porcelain); border-radius: var(--br); overflow: hidden; 
        .wpb-card__header { padding: 4rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between;
            .wpb-text {
                :is(h2, h3) { --fs: clamp(2.2rem, 2.6vw, 3.2rem);}
                :is(p) { line-height: 140%;}

            }
            .btn-group { margin-top: 2.4rem;
                .btn { width: fit-content;}
            }
        }
        .wpb-card__body { padding: 0; order: -1;}

        @media (min-width: 768px)  { display: grid; grid-template-columns: 1fr 40%; 
            .wpb-card__body { order: 1; position: relative; width: 100%; height: 100%; 
                img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;  object-fit: cover; border-radius: 0;}
            }
        }
    }

    &.wpb-card.wpb-card--pages {--p: 2.4rem; border: none; border-radius: var(--br); border-bottom-right-radius: var(--br-xl); overflow: hidden;
        .wpb-card__header {--ratio: 56% !important;}
        .wpb-card__body {position: relative; padding: 3.2rem var(--p) 0 var(--p);
            &::before { content: ''; background: var(--gradient); width: 9.2rem; height: .5rem; position: absolute; top: 0; left: var(--p);}
        }
        .wpb-card__footer { display: flex; align-items: center; gap: 4rem; justify-content: space-between; padding: 0 5.8rem 4rem 4rem;
            .card-title { font-size: clamp(2rem, 3vw, 2.4rem); line-height: 120%; font-weight: 800; max-width: 34rem; text-wrap: unset; margin-top: .8rem; }
            .card-link {
                i {font-size: 1.8rem;}
            }
        }

        @media ( min-width: 768px) { --p: 4rem;

        }
    }

}

@container card-container (min-width: 30rem) { 
    .wpb-card {
        &.wpb-card--case-study { --p: 2.8rem;

        }
    }
}

@container card-container (min-width: 32rem) { 
    .wpb-card {
        &.wpb-card--article .wpb-card__body { padding: 2.4rem 3.2rem 3.2rem 3.2rem; }
        &.wpb-card--webinars .wpb-card__body { padding: 3.2rem; }
    }
}

@container card-container (min-width: 42rem) { 
    .wpb-card {
        &.wpb-card--whitepaper { --p: 2.3rem; }
    }
}

@container card-container (min-width: 68rem) { 
    .wpb-card {
        &.wpb-card--article-extended { display: grid; grid-template-columns: 1fr 1fr;
            .wpb-card__header { height: 100%; max-height: 100%; border-radius: var(--br) 0 0 var(--br);
                &::before { display: none; }
                img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--br) 0 0 var(--br); }
            }
            .wpb-card__body { padding: 3.2rem; }
            .card-excerpt { -webkit-line-clamp: 6; }
        }
    }
}

@container card-container (min-width: 88rem) { 
    .wpb-card {
        &.wpb-card--article-extended { grid-template-columns: 1fr minmax(0, 44rem);
            .wpb-card__body { padding: 3.6rem 4rem; }
            .card-excerpt { -webkit-line-clamp: 9; margin-bottom: 4.8rem; }
        }
    }
}