.block-content--type-card .card{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.block-content--type-card .card > div:first-child:has(> img){
    height: 100%;
    width: 100%;
    aspect-ratio: 3 / 2;
}

.block-content--type-card .card > div:first-child:has(> img) img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.block-content--type-card .card .card-content{
    padding: 1rem 1.5rem 0.5rem;
    border: 1px solid var(--gray-500);
}
@media(width > 48rem){
    .block-content--type-card .card .card-content{
        padding: 2rem 2.5rem 1rem;
    }
}

.block-content--type-card .card .card-content .card-content-header h3{
    margin-block: 0;
    margin-bottom: 1rem;
    /* color: var(--blue); */
    font: var(--f-Poppins-27-700);
}
@media(width > 48rem){
    .block-content--type-card .card .card-content .card-content-header h3{
        font: var(--f-Poppins-36-700);
    }
}

.block-content--type-card .card .card-content .card-content-header span{
    font-weight: 700;
    color: var(--gray);
}

.block-content--type-card .card .card-content .card-content-extra-container{
    display: flex;
    flex-direction: column-reverse;
}

.block-content--type-card .card .card-content .card-content-extra-container > button.view-more{
    width: 100%;
    height: auto;
    cursor: pointer;
    background-color: initial;
    border-radius: 0;
    border: 3px solid var(--blue);
    color: white;
    font: var(--f-Poppins-18-700);
    font-size: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0;
    margin: 1rem 0 1.5rem;
    transition: var(--transition);
}
.block-content--type-card .card .card-content .card-content-extra-container > button.view-more:hover{
    background-color: var(--blue);
}

.block-content--type-card .card .card-content .card-content-extra-container > button.view-more:hover:after{
    filter: brightness(100);
}

.block-content--type-card .card .card-content .card-content-extra-container > button.view-more:after{
    content: url('data:image/svg+xml,<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 1.79419L9 9.20595L16 1.79419" stroke="%23077692" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.block-content--type-card .card .card-content .card-content-extra-container > button.active.view-more:after{
    transform: rotate(180deg) ;
}

.block-content--type-card .card .card-content-extra{
    display: none;
}