/* =========================================================
   NEWS SLIDER
   PREMIUM COMPACT VERSION
========================================================= */

:root{
    --gap:10px;

    --slider-height:350px;

    --radius:0px;
}

/* =========================================================
   WRAPPER
========================================================= */

.main-slider{
    display:flex;
    gap:11px;

    max-width:1780px;

    margin:18px auto;



    box-sizing:border-box;

    align-items:flex-start;
}

.main-slider-left{
    flex:1;
    min-width:0;
}

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

.main-slider-right{
    width:250px;
    flex:0 0 250px;

    height:var(--slider-height);

    overflow:hidden;

    background:#f1cf32;

    border-radius:var(--radius);

    position:relative;
}

.main-slider-right a{
    display:block;
    width:100%;
    height:100%;
}

.main-ad-banner{
    width:100%;
    height:100%;

    border-radius:4px;

    display:block;
}

/* =========================================================
   SLIDER
========================================================= */

.top-slider{
    position:relative;

    width:100%;

    height:var(--slider-height) !important;

    overflow:hidden;

    background:#f3f3f3;

    border-radius:var(--radius);

    box-shadow:none;
}

/* =========================================================
   SLIDES WRAPPER
========================================================= */

.ts-slides{
    position:relative;

    width:100%;
    height:100%;
}

/* =========================================================
   SLIDE
========================================================= */

.ts-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:none;

    opacity:0;

    box-sizing:border-box;
}

.ts-slide.active{
    display:block;
    opacity:1;
    z-index:2;
}

/* =========================================================
   BIG NEWS
========================================================= */

.ts-main{
    position:absolute;

    left:0;
    top:0;

    width:375px;
    height:100%;

    overflow:hidden;

    background:#ddd;

    border-radius:var(--radius);

    box-sizing:border-box;

    padding-top:44px;

    animation:none !important;
    transition:none !important;
   
    
    
}

/* =========================================================
   LABEL
========================================================= */

.ts-badge{
    position:absolute;
 font-family: 'Montserrat';
    text-transform: uppercase;
    top:0;
    left:0;
    right:0;
   background-color: #C62626;
   color: white;
    height:30px;

    display:flex;
    align-items:center;

    padding:0 16px;

    

   

    font-size:14px;
    font-weight:500;

    letter-spacing:.2px;

    z-index:20;

    border-bottom:1px solid rgba(0,0,0,.06);
}

/* =========================================================
   BIG IMAGE
========================================================= */

.ts-main img{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    width:100%;
    height:calc(100% - 30px);

    object-fit:cover;
    object-position:center;

    display:block;

    transition:transform .4s ease;

    image-rendering:auto;
}

.ts-main:hover img{
    transform:scale(1.03);
}

/* =========================================================
   OVERLAY
========================================================= */

.ts-main::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:calc(100% - 44px);

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.58) 42%,
            rgba(0,0,0,.10) 78%
        );

    z-index:2;
}

/* =========================================================
   BIG TITLE
========================================================= */

.ts-main-text{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:5;

    padding:16px;
}

.ts-main-text h2{
    margin:0;

    color:#fff;

    font-size:17px;
    line-height:1.3;
    font-weight:700;

    text-shadow:
        0 3px 12px rgba(0,0,0,.9),
        0 1px 2px rgba(0,0,0,.8);

    overflow:hidden;

    display:-webkit-box;
    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    max-width:94%;
}

/* =========================================================
   RIGHT GRID
========================================================= */

.ts-grid{
    position:absolute;

    right:0;
    top:0;

    width:510px;
    height:100%;

    display:grid;

    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;

    gap:var(--gap);

    opacity:1 !important;
    transform:none !important;
    animation:none !important;
}

/* =========================================================
   SMALL CARD
========================================================= */

.ts-card{
    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#ddd;

    border-radius:var(--radius);

    box-shadow:none;

    transition:none !important;
}

/* =========================================================
   SMALL IMAGE
========================================================= */

.ts-card img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    transition:transform .4s ease;

    image-rendering:auto;

    transform:translateZ(0);
}

.ts-card:hover img{
    transform:scale(1.04);
}

/* =========================================================
   SMALL OVERLAY
========================================================= */

.ts-card::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.55) 48%,
            rgba(0,0,0,.08) 78%
        );

    z-index:1;
}

/* =========================================================
   SMALL TITLE
========================================================= */

.ts-card h3{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:5;

    margin:0;

    padding:12px;

    color:#fff;

    font-size:13px;
    line-height:1.25;
    font-weight:300;

    text-shadow:
        0 3px 12px rgba(0,0,0,.9),
        0 1px 2px rgba(0,0,0,.8);

    overflow:hidden;

    display:-webkit-box;
    -webkit-box-orient:vertical;

   

    max-width:100%;
}

/* =========================================================
   REMOVE UNUSED
========================================================= */

.ts-main-text p,
.ts-main-text time,
.ts-card time{
    display:none !important;
}

/* =========================================================
   ARROWS
========================================================= */

.ts-prev,
.ts-next{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:32px;
    height:32px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.18);

    color:rgba(255,255,255,.75);

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    z-index:100;

    backdrop-filter:blur(4px);

    transition:.2s ease;

    opacity:.45;
}

.ts-prev{
    left:10px;
}

.ts-next{
    right:10px;
}

.ts-prev:hover,
.ts-next:hover{
    background:rgba(0,0,0,.35);

    color:#fff;

    opacity:.9;

    transform:
        translateY(-50%)
        scale(1.04);
}

/* =========================================================
   DOTS
========================================================= */

.ts-dots{
    display:none !important;
}

/* =========================================================
   LINK
========================================================= */

.ts-link{
    position:absolute;
    inset:0;

    z-index:10;
}

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

@media (max-width:991px){

    :root{
        --slider-height:260px;
        --radius:0px;
    }

    .main-slider{
        flex-direction: column;
        
    }

   
   .main-slider-left{
        width: 100%;
        
    }
    .main-slider-right{
        width: 100%;
        flex: 0 0 150px;
    }

    /* мобильный слайдер */

    .top-slider{
        height:260px !important;

        overflow:hidden;
    }

    .ts-slide{
        position:absolute;

        inset:0;

        width:100%;
        height:100%;
    }

    /* =====================================================
       ПОКАЗЫВАЕМ ТОЛЬКО ГЛАВНУЮ НОВОСТЬ
    ===================================================== */

    .ts-grid{
        display:none !important;
    }

    .ts-main{
        position:absolute;

        inset:0;

        width:100% !important;
        height:100% !important;

        margin:0;

        padding-top:42px;
    }

    .ts-badge{
        height:42px;

        font-size:14px;

        padding:0 14px;
    }

    .ts-main img{
        height:calc(100% - 42px);
    }

    .ts-main::before{
        height:calc(100% - 42px);
    }

    .ts-main-text{
        padding:14px;
    }

    .ts-main-text h2{
        font-size:15px;

        line-height:1.28;

        -webkit-line-clamp:2;
    }

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

    .ts-prev,
    .ts-next{
        width:28px;
        height:28px;

        font-size:12px;

        opacity:.35;
    }

    .ts-prev{
        left:8px;
    }

    .ts-next{
        right:8px;
    }
}

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

@media (max-width:640px){

    :root{
        --slider-height:220px;
    }

    .top-slider{
        height:220px !important;
    }

    .ts-main{
        height:220px !important;
    }

    .ts-main-text{
        padding:12px;
    }

    .ts-main-text h2{
        font-size:14px;

        line-height:1.25;
    }

    .ts-badge{
        font-size:13px;

        height:38px;
    }

    .ts-main img{
        height:calc(100% - 38px);
    }

    .ts-main::before{
        height:calc(100% - 38px);
    }
}