/* Example
----------------------*/
.blog-widget{ height: 100%; background:#E6E2DD;}
.blog-widget > div{ height: 100%;}
.blog-widget .row { height: 100%; display: flex; justify-content: space-between; overflow: hidden;}
.blog-widget .slider-box .slider-detail{ padding: 2rem; background: #fff; color:#5E465C; transition: all 600ms ease-in-out;}
.blog-widget .slider-box .slider-detail h4 {  line-height: 1.458em;  font-size: 2.4em;  font-family: var(--title-font); margin-bottom: 3rem; }
.blog-widget .slider-box .slider-detail a,
.blog-widget .slider-box .slider-detail time { font-family: var(--control-font); font-weight:600; line-height: 2.571em;  text-transform: uppercase; font-size: 1.4em; letter-spacing: 0.5px;  display: block; color: #5E465C; transition: all 600ms ease-in-out;}


@media only screen
and (min-width : 961px) {
    .blog-widget{ padding-top: 12.7rem;}
    .blog-widget .img-box { height: 23.5rem;}
    .blog-widget .img-box img{  margin-bottom: -2px;}
    .blog-widget .slider-box { max-width: 30%;}
    @media (hover: hover) {
        .blog-widget .slider-box .slider-detail:hover{  background: #836C69; color:#fff; }
        .blog-widget .slider-box .slider-detail:hover a,
        .blog-widget .slider-box .slider-detail:hover time{  color:#fff; }
    }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .blog-widget{ height: 100%; }
    .blog-widget .img-box{  height: 24rem;}
    .blog-widget{ padding: 7rem 0 0 0; }
    .blog-widget .slider-box{ margin-bottom: 3rem;}
    .blog-widget .slider-box .slider-detail h4{ font-size: 1.8em; line-height: 1.667em;}
    .blog-widget .slider-box .slider-detail a,
    .blog-widget .slider-box .slider-detail time{ line-height: 1.357em;}
    .blog-widget .slider-box .slider-detail time{ margin-bottom: 1rem;}
    .blog-widget .slider-box .slider-detail{ padding: 3rem;}
}

/* @end */