/****************************************************************************
 * Item
 ****************************************************************************/
.boxed_items > .columns {
    position: relative;
    padding: 4rem;
    text-align: center;
}
.boxed_items > .columns:after {
    content: ''; position: absolute;
    top: 1rem; left: 1rem; right: 1rem;
    bottom: 1rem; width: auto;
    height: auto; background: #FF6148;
    border-radius: 0.375rem;
    transition: all .25s ease;
}
.boxed_items > .columns:hover:after {
    background: linear-gradient(45deg,#19567B, #FF6148);
}
.boxed_items > .columns:before {
    content: ''; position: absolute;
    top: 1.125rem; left: 1.125rem; right: 1.125rem;
    bottom: 1.125rem; width: auto;
    height: auto; background-color: #FF6148;
    border-radius: 0.3125rem; z-index: 2;
    transition: all .25s ease;
}
.boxed_items > .columns:hover:before {
    background-color: #0D1117;
}
.boxed_items > .columns > * {
    position: relative;
    z-index: 20;
}

@media screen and (min-width:40em){
    .boxed_items > .columns {
        -webkit-box-flex:0;
        -webkit-flex:0 0 50%;
        -ms-flex:0 0 50%;
        flex:0 0 50%;
        max-width:50%
    }
    .boxed_items > .columns.text_item {
        -webkit-box-flex:0;
        -webkit-flex:0 0 100%;
        -ms-flex:0 0 100%;
        flex:0 0 100%;
        max-width:100%
    }
}
@media screen and (min-width:64em){
    .boxed_items {
        flex-direction: row-reverse;
       -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    .boxed_items > .columns {
        -webkit-box-flex:0;
        -webkit-flex:0 0 25%;
        -ms-flex:0 0 25%;
        flex:0 0 25%;
        max-width:25%;
        min-height: 19rem;
    }
    .boxed_items > .columns.text_item {
        -webkit-box-flex:0;
        -webkit-flex:0 0 50%;
        -ms-flex:0 0 50%;
        flex:0 0 50%;
        max-width:50%;
    }
}


/****************************************************************************
 * Text Item
 ****************************************************************************/
 .boxed_items > .columns.text_item {
    text-align: left;
 }
.boxed_items > .columns.text_item:after,
.boxed_items > .columns.text_item:before {
    content: none;
}

/****************************************************************************
 * Image
 ****************************************************************************/
.boxed_items .figure {
    margin: 0 auto 2rem;
    width: 3rem; height: 3rem;
    position: relative;
}
.boxed_items .figure img {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: 0; width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
}