/***************************************************************************
* Boxed Item
****************************************************************************/
.boxed_item .item_inner {
    background-color: var(--typo-color-light-grey);
    border-radius: var(--typo-border-radius);
    overflow: hidden;
    position: relative;
}
.boxed_item .item_inner.white_bg {
    background-color: #FFFFFF;
}

/***************************************************************************
* Image
****************************************************************************/
.boxed_item .item_image {
    position: relative;
} 

/***************************************************************************
* Title in Item Image
****************************************************************************/
.boxed_item .item_image:has(.content_title):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
.boxed_item .item_image .content_title {
    position: absolute;
    bottom: var(--typo-item-gap);
    left: var(--typo-item-gap);
    right: var(--typo-item-gap);
}
.boxed_item .item_image .content_title > * {
    color: #ffffff;
    position: relative;
    z-index: 30;
    margin: 0;
}


/***************************************************************************
* Content
****************************************************************************/
.boxed_item .item_content {
    padding: var(--typo-item-gap);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
} 
.boxed_item .item_content > * {
    flex: 0 0 auto;
}
.boxed_item .item_content > .item_content_inner {
    flex: 1 1 0;
}
.boxed_item .item_content > *:last-child .button:last-child,
.boxed_item .item_content > *:last-child p:last-child {
    margin-bottom: 0;
}


/***************************************************************************
* Full Height
****************************************************************************/
.boxed_item.full_height .item_inner {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: start;
}
.boxed_item.full_height .item_inner > * {
    flex: 0 0 auto;
}
.boxed_item.full_height .item_inner > .item_content {
    flex: 1 1 0;
}

/***************************************************************************
* Min Height of Image |
****************************************************************************/
@media screen and (min-width:40em){
    .boxed_item.big_image_left .item_content {
        justify-content: center;
    }
    .boxed_item.big_image_left .item_content > .item_content_inner {
        flex: 0 0 auto;
    }
    .boxed_item.big_image_left .item_image .data_ratio:before {
        content: '';
        padding: 0 0 66.66%;
    }
}



/***************************************************************************
* STYLE: Card Listing 
****************************************************************************/
.card_listing .boxed_item .item_inner.white_bg {
    border: 1px solid var(--typo-color-grey);
}
@media screen and (max-width:63.9375em){
    .card_listing .boxed_item .item_image .content_title {
        display: none;
    }
}
@media screen and (min-width:64em){
    .card_listing .boxed_item .item_image {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: auto; height: auto;
        z-index: 20; pointer-events: none;
        opacity: 1; transition: all .25s ease;
    } 
    .card_listing .boxed_item .item_image picture{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: auto; height: auto;
    }
    .card_listing .boxed_item .item_image img {
        position: absolute; top: 0; left: 0;
        bottom: 0; right: 0; width: 100%; height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }
    .card_listing .boxed_item .item_inner:hover .item_image {
        opacity: 0;
    }
}