:root{
--accent: #5ec8ff;
--muted: rgba(255,255,255,0.5);
}

.video-carousel {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 70vh;    /* но не выше самого экрана */
    overflow: hidden;
    background: #000;
/*
    .caption {
        position:absolute;
        top:20%;
        left:7%;
        z-index: 3;
        color:#fff;
        h1 {
            color:#fff;
            text-shadow: 1px 3px 5px #000;
            margin:0 0 8px -3px;
            hyphens: none;
            font-size: clamp(20px, 5vw, 60px);
        }
    } */
    .stage{
        position: absolute;
        inset: 0;
        video{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;   /* заполняет всю область, обрезая лишнее */
            opacity: 0;
            transition: opacity 0.6s ease;
            &.active{
                opacity: 1;
                z-index: 1;
            }
        }
    }
    .buttons {
        position: absolute;
        left: 2.5%;
        right:0;
        bottom: 0;
        z-index: 4;
        display:flex;
        flex-flow:row wrap;
        gap:0 1.5%;
        a {
            color:white;
            padding:.5em 1em .4em;
            background:var(--tt-dark-gray);
            border-radius:10px 10px 0 0 ;
            font-size:16px;
            font-weight:500;
            hiphens: none;
            box-shadow: 2px -2px 3px #000;
            transition: transform 0.1s ease, box-shadow 0.1s ease;
            &:active {
              /* Сдвигаем кнопку на 1px по диагонали */
              transform: translate(1px, -1px);
              /* Уменьшаем тень на этот же 1px (было 3px, стало 2px) */
              box-shadow: 1px 1px 3px #000;
            }
        }
    }
    .dots{
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        z-index: 2;
        display:flex;
        gap:8px;
        .dot{
            width:8px; height:8px;
            border-radius:50%;
            background: var(--muted);
            cursor:pointer;
            transition: background .2s, transform .2s;
            &.active{
                background: var(--accent);
                transform: scale(1.3);
            }
        }
    }
}


@media only screen and (max-width : 930px) {
    .dots {
        display: none;
    }

    h1 {
        font-size:30px;
    }
}

@media only screen and (max-width : 768px) {
    .video-carousel .buttons a{
        font-size:13px;
    }
}