.functions-block {
    padding-bottom: 100px;
    .block-subtitle {
        max-width: 724px;
        margin-bottom: 64px;
        color: var(--grey-350);
    }
    .tab-btns {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 4px;
    }
    .bg {
        height: 580px;
        border-radius: 40px 40px 0px 0px;
        overflow: hidden;
        padding-top: 53px;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 2;
        background: linear-gradient(61deg, rgb(160 207 235 / 93%) 0%, rgb(225 255 240 / 70%) 20%, rgb(0 241 253 / 78%) 45.89%, rgb(3 48 213 / 55%) 71%, rgb(15 0 96 / 94%) 100%);
    }
    .tab-btn {
        display: flex;
        gap: 12px;
        border: 1px solid var(--alpha-gray-950-alpha-gray-10);
        border-radius: 12px;
        padding: 14px 20px;
        align-items: center;
        position: relative;
        cursor: pointer;
    }
    .tab-btn__name {
        font-weight: 500;
        font-size: 14px;
        line-height: 143%;
        color: var(--grey-600);
        transition: 0.3s;
    }
    .tab-btn__icon {
        position: relative;
        transition: 0.3s;
        width: 32px;
        height: 32px;
        min-width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tab-btn__icon img,
    .tab-btn__icon svg {
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        max-width: 80%;
        max-height: 80%;
    }
    .tab-btn.active .tab-btn__icon,
    .tab-btn:hover .tab-btn__icon {
        filter: unset;
    }
    img.tab-item {
        position: absolute;
        top: 16px;
        left: 16px;
        right: 16px;
        width: calc(100% - 32px);
        height: calc(100% - 16px);
        display: block;
        object-fit: cover;
        object-position: top center;
        border-radius: 12px 12px 0px 0px;
        transform: translateY(20px);
        transition: 0.5s;
        filter: blur(10px);
        opacity: 0;
        pointer-events: none;
    }
    img.tab-item.active {
        pointer-events: all;
        display: flex;
        opacity: 1;
        filter: unset;
        transform: unset;
        transition: 0.3s;
        transition-delay: 0.3s;
    }
    .wrapper {
        width: 100%;
        max-width: calc(100% - 106px);
        height: 100%;
        margin-top: auto;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.15);
        background: linear-gradient(102deg, rgb(255 253 238) -27.14%, rgb(210 239 249 / 60%) 17.89%, rgb(143 170 229 / 0%) 104.83%);
        border-radius: 20px 20px 0px 0px;
        overflow: hidden;
        &:before {
            content: "";
            width: calc(100% - 2px);
            height: calc(100% - 1px);
            top: 1px;
            left: 1px;
            position: absolute;
            box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.15);
            background: linear-gradient(102.53deg, rgb(5 15 38 / 26%) -27.14%, rgba(48, 200, 255, 0.33) 17.89%, rgba(39, 57, 97, 0.5) 104.83%);
            pointer-events: none;
            border-radius: 20px 20px 0px 0px;
        }
    }
    .tabs-content {
        position: relative;
        border-radius: 40px 40px 0px 0px;
        overflow: hidden;
        margin-bottom: 16px;
    }
    video {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        object-fit: cover;
        height: 100%;
        width: 100%;
        z-index: 1;
        opacity: 0.3;
    }
    
    
    @media (max-width: 1200px) { 
        padding: 40px 0px;
        .wrapper {
            max-width: calc(100% - 50px);
        }
        .tab-btn {
            padding: 12px 16px;
        }
        .main-title {
            text-align: center;
        }
        .block-subtitle {
            text-align: center;
        }
    }
    
    @media (max-width: 996px) { 
        .tab-btn {
            gap: 4px;
            padding: 8px;
        }
        .tab-btn__icon {
            width: 28px;
            height: 28px;
            min-width: 28px;
        }
        .tab-btn__icon img,
        .tab-btn__icon svg {
            max-width: 100%;
            max-height: 100%;
        }
    }
    
    @media (max-width: 768px) { 
        .block-subtitle {
            font-size: 16px;
        }
        .tab-btns {
            grid-template-columns: repeat(3,1fr);
        }
        .bg {
            height: 370px;
            padding-top: 20px;
            overflow: auto;
        }
        img.tab-item {
            top: 8px;
            left: 8px;
            right: 8px;
            width: calc(100% - 16px);
            height: calc(100% - 8px);
        }
        .tab-btn:after {
            height: calc(100% - 22px);
            top: 11px;
        }
        .tab-btn:before {
            width: calc(100% - 24px);
            left: 12px;
        }
    }
    @media (max-width: 600px) { 
        .tab-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .tab-btn {
            width: calc((100% - 8px) / 2);
            flex-grow: 1;
            min-height: 55px;
        }
        .bg {
            height: 100%;
            background: linear-gradient(61deg, rgb(160 207 235 / 73%) 0%, rgb(225 255 240 / 62%) 25%, rgb(0 241 253 / 58%) 55.89%, rgb(0 241 253 / 72%) 100%);
            border-radius: 20px 20px 0px 0px;
            padding: 40px 0px 25px;
            width: 100%;
        }
        .tabs-content {
            height: 320px;
            display: flex;
            border-radius: 20px 20px 0px 0px;
        }
        .wrapper {
            width: calc(100% - 22px);
            margin-left: 11px;
            margin-right: 11px;
            max-width: unset;
            border-radius: 20px;
        }
        img.tab-item {
            width: calc(100% - 16px);
            height: calc(100% - 16px);
            border-radius: 12px;
        }
    }
    @media (max-width: 498px) { 
        .tab-btn:nth-child(even):after {
            display: none;
        }
        .tabs-content {
            height: 270px;
        }
    }
}