/* ==========================================================================
   ABOUT — COMPANY NEWS
   ========================================================================== */

.about-news,
.about-news *,
.about-news *::before,
.about-news *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   SECTION

   1920:
   90 + 1740 + 90
   ========================================================================== */

.about-news{
    width:100%;
    max-width:1920px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    gap:48px;

    padding:72px 90px;

    background:#FFFFFF;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.about-news__header{
    width:100%;
    min-width:0;
    height:50px;

    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;

    gap:32px;
}


.about-news__heading{
    min-width:0;

    margin:0;
    padding:0;

    font-family:"Roboto Flex Custom",sans-serif;
    font-style:italic;
    font-weight:700;

    font-size:56px;
    line-height:50px;
    letter-spacing:-.6px;

    color:#171717;
    font-variation-settings:"wght" 700;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;

}


.about-news__all{
    flex:none;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;

    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#A3A3A3;

    text-decoration:none;

    transition:color .2s ease;
}


.about-news__all:hover{
    color:#171717;

    text-decoration:none;
}


/* ==========================================================================
   CONTENT

   1920:
   available = 1740
   gap = 12
   left = 1158
   right = 570
   ========================================================================== */

.about-news__content{
    width:100%;
    min-width:0;

    display:grid;

    /*
     * 1158 : 570
     *
     * Используем fr, а не жесткие px.
     * Поэтому между адаптивами секция не разваливается.
     */
    grid-template-columns:
        minmax(0,2.031578947fr)
        minmax(0,1fr);

    align-items:start;

    gap:12px;
}


/* ==========================================================================
   MAIN CARD
   ========================================================================== */

.about-news-main{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    gap:20px;

    background:#FFFFFF;
}


/* ==========================================================================
   MAIN IMAGE

   Figma:
   1158 x 634.19
   ========================================================================== */

.about-news-main__image-link{
    position:relative;

    width:100%;

    display:block;

    aspect-ratio:1158 / 634.19;

    overflow:hidden;

    border:1px solid rgba(82,82,82,.16);

    background:#F5F5F5;

    text-decoration:none;
}


.about-news-main__image{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;
}


.about-news-main:hover .about-news-main__image{
    transform:scale(1.01);
}

/* ==========================================================================
   PLACEHOLDER
   ========================================================================== */

.about-news__placeholder{
    display:block;

    width:100%;
    height:100%;

    background:#F5F5F5;
}


/* ==========================================================================
   MAIN INFO
   ========================================================================== */

.about-news-main__info{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:20px;
}


.about-news-main__top{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:12px;
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.about-news__badge{
    width:max-content;
    max-width:100%;
    min-width:58px;
    height:24px;

    flex:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 8px;

    overflow:hidden;

    background:#F5F5F5;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:500;

    font-size:14px;
    line-height:18px;
    letter-spacing:-.3px;

    color:#171717;

    white-space:nowrap;
    text-overflow:ellipsis;
}


/* ==========================================================================
   MAIN TITLE
   ========================================================================== */

.about-news-main__title{
    width:100%;

    margin:0;

    font-family:"Roboto Flex Custom",sans-serif;
    font-style:italic;
    font-weight:700;

    font-size:40px;
    line-height:38px;
    letter-spacing:-1.2px;

    color:#171717;

    text-decoration:none;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
    font-variation-settings:"wght" 700;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;

}


.about-news-main:hover .about-news-main__title{
    color:#171717;

    text-decoration:none;

    opacity:.7;
}

/* ==========================================================================
   META
   ========================================================================== */

.about-news__meta{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:row;
    align-items:center;

    gap:8px;

    overflow:hidden;

    font-family:Inter,sans-serif;
    font-style:normal;
    font-weight:400;

    font-size:16px;
    line-height:22px;
    letter-spacing:-.4px;

    color:#A3A3A3;

    white-space:nowrap;
}


/* ==========================================================================
   SMALL LIST
   ========================================================================== */

.about-news-list{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    gap:12px;
}


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

   Figma:
   570 x 188
   ========================================================================== */

.about-news-card{
    width:100%;
    min-width:0;
    height:188px;

    display:grid;

    /*
     * Figma:
     * image = 280
     * gap   = 12
     * info  = 278
     */
    grid-template-columns:
        minmax(0,280fr)
        minmax(0,278fr);

    align-items:stretch;

    gap:12px;

    background:#FFFFFF;
}


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

.about-news-card__image-link{
    position:relative;

    width:100%;
    min-width:0;
    height:188px;

    display:block;

    overflow:hidden;

    border:1px solid rgba(82,82,82,.16);

    background:#F5F5F5;

    text-decoration:none;
}


.about-news-card__image{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;
}


.about-news-card:hover .about-news-card__image{
    transform:scale(1.025);
}

/* ==========================================================================
   PLAY
   ========================================================================== */

.about-news__play{
    position:absolute;

    left:50%;
    top:50%;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:translate(-50%,-50%);

    border-radius:999px;

    background:#FFFFFF;

    color:#171717;

    pointer-events:none;
}


.about-news__play--main{
    width:48px;
    height:48px;
}


.about-news__play svg{
    display:block;

    width:24px;
    height:24px;
}


/* ==========================================================================
   SMALL INFO
   ========================================================================== */

.about-news-card__info{
    width:100%;
    min-width:0;
    height:188px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;

    gap:8px;
}


.about-news-card__top{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:8px;
}


.about-news-card__title{
    width:100%;
    min-width:0;

    margin:0;

    font-family:"Roboto Flex Custom",sans-serif;
    font-style:italic;
    font-weight:700;

    font-size:24px;
    line-height:28px;
    letter-spacing:-.8px;

    color:#171717;

    text-decoration:none;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
    font-variation-settings:"wght" 700;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;

}


.about-news-card:hover .about-news-card__title{
    color:#171717;

    text-decoration:none;

    opacity:.7;
}

/* ==========================================================================
   1440
   ========================================================================== */

@media (min-width:1200px) and (max-width:1600px){

    /* ----------------------------------------------------------------------
       SECTION
       1440 - 90 - 90 = 1260
       ---------------------------------------------------------------------- */

    .about-news{
        width:100%;

        gap:48px;

        padding:72px 90px;
    }


    /* ----------------------------------------------------------------------
       HEADER
       ---------------------------------------------------------------------- */

    .about-news__header{
        width:100%;
        height:50px;
    }

    .about-news__heading{
        font-size:56px;
        line-height:50px;
        letter-spacing:-.6px;
    }

    .about-news__all{
        font-size:16px;
        line-height:22px;
    }


    /* ----------------------------------------------------------------------
       CONTENT

       Figma:
       800 + 12 + 448 = 1260
       ---------------------------------------------------------------------- */

    .about-news__content{
        width:100%;

        display:grid;

        grid-template-columns:
            minmax(0,800fr)
            minmax(0,448fr);

        gap:12px;
    }


    /* ----------------------------------------------------------------------
       MAIN
       ---------------------------------------------------------------------- */

    .about-news-main{
        width:100%;
        min-width:0;

        gap:20px;
    }


    /* 800 × 438.13 */

    .about-news-main__image-link{
        width:100%;
        height:auto;

        aspect-ratio:800 / 438.13;
    }


    .about-news-main__info{
        width:100%;

        min-height:154px;

        gap:20px;
    }

    .about-news-main__top{
        width:100%;

        gap:12px;
    }


    /* Figma 40 / 38 */

    .about-news-main__title{
        width:100%;

        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;

        -webkit-line-clamp:2;
    }


    /* ----------------------------------------------------------------------
       RIGHT LIST

       3 × 188 + 2 × 12 = 588
       ---------------------------------------------------------------------- */

    .about-news-list{
        width:100%;
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:12px;
    }


    /* На 1440 по Figma видны 3 маленькие новости */

    .about-news-list .about-news-card:nth-child(n+4){
        display:none;
    }


    /* ----------------------------------------------------------------------
       SMALL CARD

       total = 448
       image = 280
       gap = 12
       info = 156
       ---------------------------------------------------------------------- */

    .about-news-card{
        width:100%;
        min-width:0;
        height:188px;

        display:grid;

        grid-template-columns:
            280px
            minmax(0,1fr);

        gap:12px;
    }


    .about-news-card__image-link{
        width:280px;
        height:188px;
    }


    .about-news-card__info{
        width:100%;
        min-width:0;
        height:188px;

        gap:8px;
    }


    .about-news-card__top{
        width:100%;
        min-width:0;

        gap:8px;
    }


    .about-news-card__title{
        width:100%;
        min-width:0;

        font-size:24px;
        line-height:28px;
        letter-spacing:-.8px;

        -webkit-line-clamp:2;
    }


    .about-news-card .about-news__meta{
        width:100%;
        min-width:0;

        font-size:16px;
        line-height:22px;
    }

}


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

@media (max-width:1199px){

    /* ----------------------------------------------------------------------
       SECTION

       768 - 16 - 16 = 736
       ---------------------------------------------------------------------- */

    .about-news{
        width:100%;
        max-width:none;

        margin:0;

        gap:32px;

        padding:32px 16px;

        overflow:hidden;
    }


    /* ----------------------------------------------------------------------
       HEADER
       ---------------------------------------------------------------------- */

    .about-news__header{
        width:100%;
        height:38px;

        display:flex;
        align-items:center;

        gap:20px;
    }


    .about-news__heading{
        width:auto;

        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;

        white-space:nowrap;
    }


    /*
     * В tablet/mobile макете отдельной
     * ссылки справа нет.
     */

    .about-news__all{
        display:none;
    }


    /* ----------------------------------------------------------------------
       CONTENT
       ---------------------------------------------------------------------- */

    .about-news__content{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:flex-start;

        gap:24px;
    }


    /* ----------------------------------------------------------------------
       MAIN CARD
       ---------------------------------------------------------------------- */

    .about-news-main{
        width:100%;
        min-width:0;

        gap:20px;
    }


    /* Figma: 736 × 403.08 */

    .about-news-main__image-link{
        width:100%;
        height:auto;

        aspect-ratio:736 / 403.08;
    }


    .about-news-main__info{
        width:100%;

        min-height:138px;

        gap:20px;
    }


    .about-news-main__top{
        width:100%;

        gap:12px;
    }


    /* Figma: 32 / 30 */

    .about-news-main__title{
        width:100%;

        font-size:32px;
        line-height:30px;
        letter-spacing:-1px;

        -webkit-line-clamp:2;
    }


    /* ----------------------------------------------------------------------
       META
       ---------------------------------------------------------------------- */

    .about-news__meta{
        width:100%;

        font-size:16px;
        line-height:22px;

        white-space:nowrap;
    }


    /* ----------------------------------------------------------------------
       SLIDER

       По Figma viewport slider = 361px.
       Карточки движутся горизонтально.
       ---------------------------------------------------------------------- */

    .about-news-list{
        width:361px;
        max-width:100%;

        display:flex;
        flex-direction:row;
        align-items:flex-start;

        gap:12px;

        overflow-x:auto;
        overflow-y:hidden;

        padding:0;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

        scroll-snap-type:x proximity;
    }


    .about-news-list::-webkit-scrollbar{
        display:none;
    }


    /* Вернуть 4-ю карточку после desktop */

    .about-news-list .about-news-card:nth-child(n+4){
        display:flex;
    }


    /* ----------------------------------------------------------------------
       SLIDER CARD

       Figma:
       width 320
       image 320 × 176
       ---------------------------------------------------------------------- */

    .about-news-card{
        width:320px;
        min-width:320px;
        height:auto;

        flex:0 0 320px;

        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:12px;

        scroll-snap-align:start;
    }


    .about-news-card__image-link{
        width:320px;
        height:176px;

        flex:none;
    }


    .about-news-card__info{
        width:320px;
        height:122px;

        flex:none;

        gap:20px;
    }


    .about-news-card__top{
        width:320px;

        gap:8px;
    }


    .about-news-card__title{
        width:320px;

        font-size:20px;
        line-height:24px;
        letter-spacing:-.6px;

        -webkit-line-clamp:2;
    }


    .about-news-card .about-news__meta{
        width:320px;
    }

}


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

@media (max-width:600px){

    /* ----------------------------------------------------------------------
       SECTION

       393 - 16 - 16 = 361
       ---------------------------------------------------------------------- */

    .about-news{
        width:100%;

        gap:32px;

        padding:32px 16px;
    }


    /* ----------------------------------------------------------------------
       HEADER
       ---------------------------------------------------------------------- */

    .about-news__header{
        width:100%;
        height:38px;
    }


    /*
     * В Figma mobile заголовок тоже 40 / 38,
     * НЕ 32px.
     */

    .about-news__heading{
        font-size:40px;
        line-height:38px;
        letter-spacing:-1.2px;
    }


    /* ----------------------------------------------------------------------
       CONTENT
       ---------------------------------------------------------------------- */

    .about-news__content{
        width:100%;

        gap:24px;
    }


    /* ----------------------------------------------------------------------
       MAIN

       Figma:
       width = 361
       ---------------------------------------------------------------------- */

    .about-news-main{
        width:100%;

        gap:20px;
    }


    /* 361 × 197.71 */

    .about-news-main__image-link{
        width:100%;
        height:auto;

        aspect-ratio:361 / 197.71;
    }


    /*
     * Mobile:
     * info = 168
     */

    .about-news-main__info{
        width:100%;

        min-height:168px;

        gap:20px;
    }


    .about-news-main__top{
        width:100%;

        gap:12px;
    }


    /*
     * Figma:
     * title = 32 / 30
     * до 3 строк
     */

    .about-news-main__title{
        width:100%;

        font-size:32px;
        line-height:30px;
        letter-spacing:-1px;

        -webkit-line-clamp:3;
    }


    /* ----------------------------------------------------------------------
       SLIDER

       viewport = 361
       card = 320
       справа остаётся кусок следующей карточки
       ---------------------------------------------------------------------- */

    .about-news-list{
        width:361px;
        max-width:100%;

        gap:12px;

        overflow-x:auto;
        overflow-y:hidden;

        scrollbar-width:none;

        scroll-snap-type:x proximity;

        -webkit-overflow-scrolling:touch;
    }


    .about-news-list::-webkit-scrollbar{
        display:none;
    }


    /* ----------------------------------------------------------------------
       CARD
       ---------------------------------------------------------------------- */

    .about-news-card{
        width:320px;
        min-width:320px;

        flex:0 0 320px;

        gap:12px;

        scroll-snap-align:start;
    }


    .about-news-card__image-link{
        width:320px;
        height:176px;
    }


    .about-news-card__info{
        width:320px;
        height:122px;

        gap:20px;
    }


    .about-news-card__top{
        width:320px;

        gap:8px;
    }


    .about-news-card__title{
        width:320px;

        font-size:20px;
        line-height:24px;
        letter-spacing:-.6px;

        -webkit-line-clamp:2;
    }


    .about-news-card .about-news__meta{
        width:320px;

        font-size:16px;
        line-height:22px;
    }

}