@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2/media.pcss";

.videoBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon {
    margin-top: 72px;
    width: 72px;
    height: 72px;

    @media (--ktl-tl-up) {
        width: 96px;
        height: 96px;
    }
}

.title {
    margin: 32px 0 0 0;
    text-align: center;
}

.subtitle {
    text-align: center;
    margin: 25px 0 0 0;
}

.videoPlayer {
    --video-player-ratio: 16 / 9;
    --video-border-radius: 24px;

    overflow: hidden;
    width: 100%;
    margin: 48px 72px 72px;
}

.videoPlayer > div {
    padding-bottom: calc(1% * (100 / (var(--video-player-ratio)))) !important;
}

.videoPlayer, .videoPlayer [data-test="video-mini-player"] {
    border-radius: var(--video-border-radius);
}

.videoPlayer button[data-test="overlay"] > span {
    margin: 0;
}