/*
=====================================================
MEDIA PREVIEW
Главная страница
=====================================================
*/

.media-preview-section{

    max-width:950px;

    margin:120px auto;

    padding:0 20px;

}


.media-preview-title{

    text-align:center;

    margin-bottom:50px;

}


.media-preview-title h2{

    font-family:"Orbitron", sans-serif;

    font-size:clamp(36px,5vw,56px);

}


.media-preview-wrapper{

    position:relative;

}


.media-preview-feed{

    display:flex;

    flex-direction:column;

    gap:40px;

}


/*
=====================================================
КАРТОЧКИ ПРЕВЬЮ
=====================================================
*/
.media-preview-feed .media-card{

    width:80%;

    max-width:650px;

    margin-left:auto;
    margin-right:auto;

    border-radius:24px;

}


.media-preview-feed .media-card:nth-child(2){

    width:68%;
    max-width:550px;
    margin:0 auto;

    -webkit-mask-image:
    linear-gradient(
        to bottom,
        black 0%,
        black 30%,
        transparent 100%
    );

    mask-image:
    linear-gradient(
        to bottom,
        black 0%,
        black 30%,
        transparent 100%
    );

}


.media-preview-feed .media-card:nth-child(2)
.media-info a{

    pointer-events:none;

    cursor:default;

}


/*
=====================================================
КНОПКА «ПОКАЗАТЬ ВСЕ МЕДИА»
=====================================================
*/

.media-preview-overlay{

    position:absolute;

    left:50%;

    top:91%;

    transform:translateX(-50%);

    z-index:20;

}


.media-preview-overlay a{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px 35px;

    border-radius:25px;

    background:rgba(20,15,35,.45);

    backdrop-filter:blur(20px);

    border:1px solid rgba(165,110,255,.5);

    color:var(--text);

    text-decoration:none;

    font-size:18px;

    white-space:nowrap;

    transition:.3s ease;

}


.media-preview-overlay a:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 40px rgba(165,110,255,.6);

}


.media-preview-overlay::before{

    content:"";

    position:absolute;

    left:50%;

    top:-10px;

    transform:translateX(-50%);

    width:100vw;

    height:1px;

    background:rgba(165,110,255,.15);

    box-shadow:
    0 0 20px rgba(165,110,255,.4);

}
.media-preview-feed .media-card .media-stats{

    gap:6px;

    margin-top:16px;
    padding-top:14px;

}