.top-box-wrap {display:flex;flex-flow:row wrap;justify-content:space-between;align-items:flex-start;}
.top-box-item {margin-bottom:50px;position:relative;width:330px;}
.top-box-item img {width:auto;height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);transition: all 0.3s ease;z-index:1;}
.top-box-item a {display:block;position:relative;width:100%;height:520px;text-decoration:none;overflow:hidden;}
.top-box-item a:not(.btn)::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 50%;background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);pointer-events: none;z-index:2;}
.top-box-item a span.top-box-author {display:inline-block;position:absolute;left:20px;bottom:20px;color:var(--star-dust);font-size:14px;font-weight:300;line-height:20px;z-index:3;}
.top-box-item a h3 {display:inline-block;position:absolute;left:20px;top:330px;color:var(--snow-white);font-size:24px;font-weight:300;line-height:28px;z-index:3;}
.top-box-item a.btn.rounded.right {position:absolute;line-height:25px;bottom:20px;right:-10px;z-index:3;width:auto;height:25px;font-size:16px;font-weight:300;text-transform:uppercase;padding:0 10px;}
@media (min-width: 768px) {
    .top-box-item a:hover img {transform:translateX(-50%) translateY(-50%) scale(1.05);}
}
@media (max-width: 768px) {
    .top-box-item {width:100%;position:relative;margin-bottom:32px;}
    .top-box-item a {height:auto;}
    .top-box-item a:not(.btn)::after {display:none;}
    .top-box-item img {width:100%;transform:unset;height:auto;position:static;}
    .top-box-item a h3 {color:var(--tree-house);position: static;padding: 0 24px;margin: 8px 0;}
    .top-box-item a.btn.rounded.right {top:50%;right: 5px;}
    .top-box-item a span.top-box-author {position:static;padding: 0 24px;}
}