body {
    @include themer(background-color, (
        'dark': $background-color-dark,
        'light': $background-color-light,
    ));
    @include themer(color, (
        'dark': $color-dark,
        'light': $color-light,
    ));

    position: relative;
}

.lead {
    font-weight: 400;
    font-size: 23px;
    line-height: 1.4;

    a {
        background-color: rgba(191,234,82,0.15);
    }
}

.soon-blurred {
    position: relative;
    filter: blur(2px);
    
    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, .1);
    }
}

.icon svg {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: -.15em;
}

.star-promo {
    border-radius: 5px;
    margin-left: auto;
    border: 1px solid rgba(0,0,0,.1);
    padding: 15px 25px;
    position: relative;

    @media only screen and (min-width: 992px) {
        max-width: 480px;
    }
}
.star-promo__name {
    font-size: 14px;
    font-style: italic;

    img {
        width: 26px;
        height: 26px;
        border-radius: 100%;
        border: 1px solid rgba(0, 0, 0, .1);
        margin-left: 10px;
        display: inline-block !important;
    }

    @media only screen and (min-width: 480px) {
        position: absolute;
        right: 25px;
    }
}
.star-promo__text {
    margin-bottom: 1rem;
    
    p {
        margin-bottom: .7rem;
    }
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}

.badge-warning {
    color: #3e3e3e;
    background-color: #fff6a4;
}


// .video {
//     background-color: #141414;  
//     display: flex;
//     flex-direction: column;
//     justify-content: space-between;
//     min-height: 300px;
//     position: relative;
//     color: white;
//     font-family: Roboto, apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
// }
// .video:before {
//     content: '';
//     position: absolute;
//     width: 179px;
//     height: 168px;
//     background-image: url("data:image/svg+xml,%3Csvg width='179' height='168' viewBox='0 0 179 168' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.2' d='M0 0V168L179 85.5652L0 0Z' fill='%23C4C4C4'/%3E%3C/svg%3E%0A");
//     background-size: contain;
//     background-position: center;
//     background-repeat: no-repeat;
//     top: 0;
//     left: 0;
//     right: 0;
//     bottom: 0;
//     margin: auto;
//     transition: all .3s;
//     transform: scale(.8);
// }
// .video:hover:before {
//     transform: scale(.6);
//     filter: brightness(2);
// }
// .video:after {
//     content: '';
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     background-color: #141414; 
//     z-index: -1; 
//     transition: all .3s;
// }
// .video:hover:after {
//     transform: scalex(1.02) scaleY(1.1);  
// }

// .video__title,
// .scope-markdown h2.video__title {   
//     color: #CFE0A3;
//     border-bottom: none;
//     margin-top: 0;
//     padding-bottom: 0;
//     line-height: 1.4;
    
//     @media only screen and (max-width: 767px) {
//         font-size: 1.5rem;   
//     }   
// }

// .video__btn:after {
//     content: '';
//     position: absolute;
//     left: 0;
//     top: 0;
//     right: 0;
//     bottom: 0;
// }
// .video__btn:hover {
//     color: black !important;   
// }

// .video__subtitle {
//     font-size: 18px;   
// }
