/* =========================
   BANNER
========================= */

.banner-wrap{
    width:100%;
    padding:16px 20px 0;
    background:#020503;
}

.top-banners{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    width:100%;
}

.site-banner,
.side-banner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid #246438;
    border-radius:7px;
    background:
        repeating-linear-gradient(
            135deg,
            #07130a 0,
            #07130a 12px,
            #0a1c0f 12px,
            #0a1c0f 24px
        );
    color:#9bcda8;
}

.site-banner{
    min-height:100px;
}

.site-banner img{
    display:block;
    width:100%;
    height:100px;
    object-fit:cover;
}

.site-banner span,
.side-banner span{
    display:none;
    padding:14px;
    text-align:center;
    font-size:11px;
    line-height:1.6;
}

.site-banner.empty span,
.side-banner.empty span{
    display:block;
}

.site-banner b,
.side-banner b{
    color:#39ff70;
}


/* =========================
   SIDE BANNER
========================= */

.side-banner{
    position:fixed;
    z-index:3;
    top:50%;
    width:130px;
    min-height:300px;
    transform:translateY(-50%);
}

.side-banner img{
    display:block;
    width:130px;
    height:300px;
    object-fit:cover;
}

.side-left{
    left:12px;
}

.side-right{
    right:12px;
}


/* =========================
   CARD ACTIONS
========================= */

.card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
}

.card-actions .detail{
    min-width:0;
    text-align:center;
    text-decoration:none;
}

.trailer-button{
    display:block;
}


/* =========================
   TABLET
========================= */

@media(max-width:1450px){
    .side-banner{
        display:none;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width:570px){

    .banner-wrap{
        padding:12px 12px 0;
    }

    .top-banners{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .site-banner,
    .site-banner img{
        min-height:80px;
        height:80px;
    }

    .card-actions{
        display:none;
    }
}