.device {
    overflow: hidden;
}

.device_title {
    margin: 0 0 var(--offset-md-2xs);
}

.device_desc {
    margin-bottom: var(--offset-md-l);
    font-weight: 700;
}

.device_wrapper {
    max-width: 288px;
    margin: 0 auto;
}

.device_image {
    width: 620px;
    height: 380px;
    margin-bottom: var(--offset-md-l);
    position: relative;
    left: -340px;
}

.device_image img {
    max-width: 100%;
}

.device_content {
    flex-flow: column;
    align-items: center;
    display: flex;
}

.device .slider {
    margin-bottom: var(--offset-md-s);
}

.device .slider_statistics {
    margin-bottom: var(--offset-md-2xs);
}

.statistics {
    text-align: left;
    align-items: center;
    display: flex;
}

.statistics_img {
    width: 40px;
    height: 40px;
}

.statistics_img img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.statistics_text_block {
    margin-left: var(--offset-sm-m);
}

.statistics_top {
    font: var(--caption-text);
}

.statistics_bottom {
    font: var(--title-h4);
}

.cards_box {
    flex-direction: column-reverse;
    align-items: flex-end;
    width: 288px;
    display: flex;
}

.cards_box_cards {
    width: 100%;
    margin-top: calc(var(--height-sm-s) * -1);
    position: relative;
    height: 200px;
}

.cards_box .card {
    transition: transform var(--transition-slower) cubic-bezier(.18, .98, .45, 1), opacity var(--transition-slower) cubic-bezier(.18, .98, .45, 1);
    padding: var(--offset-sm-l);
    border-radius: var(--border-radius-m);
    cursor: pointer;
    background: rgba(78, 78, 88, .6);
    flex-direction: row;
    align-items: flex-start;
    width: 288px;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

.cards_box .card {
    background: rgba(78, 78, 88, .6);
    height: 152px;
}

.cards_box .card[data-slide="0"] {
    z-index: 6;
    opacity: var(--opacity-10);
    transition: transform .32s cubic-bezier(.18, .98, .45, 1), opacity .32s cubic-bezier(.18, .98, .45, 1);
    transform: translate(0) scale(1);
}

.cards_box .card[data-slide="1"] {
    z-index: 5;
    opacity: var(--opacity-9);
    transform: translateY(15px) scale(.95);
}

.cards_box .card[data-slide="2"] {
    z-index: 4;
    opacity: var(--opacity-8);
    transform: translateY(30px) scale(.9);
}

.cards_box .card[data-slide="3"] {
    z-index: 3;
    opacity: var(--opacity-7);
    transform: translateY(45px) scale(.85);
}

.cards_box .card_text {
    color: var(--color-white);
    text-align: left;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.cards_box_dots {
    display: flex;
    transform: translateY(-48px);
}

.cards_box_dots .dot {
    width: var(--height-sm-s);
    height: var(--height-sm-s);
    margin-right: var(--offset-sm-m);
    border-radius: var(--border-radius-round);
    background-color: var(--color-background-secondary-surface);
    cursor: pointer;
}

.cards_box_dots .dot.active {
    background-color: #ffdd3c;
}

.statistics {
    text-align: left;
    align-items: center;
    display: flex;
}

.device_content>.statistics {
    margin-bottom: var(--offset-sm-l);
    align-self: flex-start;
}

.statistics_img {
    width: 40px;
    height: 40px;
}

.statistics_img img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.statistics_text_block {
    margin-left: var(--offset-sm-m);
}

.statistics_top {
    font: var(--caption-text);
}

.statistics_bottom {
    font: var(--title-h4);
}

.device_buttons {
    margin-bottom: var(--offset-md-l);
    flex-direction: column;
    display: flex;
}

.device_block_button {
    margin-bottom: var(--offset-md-l);
}

.mobile_btn_block {
    border-radius: var(--border-radius-m);
    width: 288px;
    height: 68px;
    position: relative;
    overflow: hidden;
}

.mobile_btn_block:before {
    content: "";
    background: var(--color-background-accent-positive);
    border-radius: var(--border-radius-round);
    width: 45px;
    opacity: var(--opacity-8);
    transition: var(--transition-slow) cubic-bezier(.71, .14, .36, .89);
    will-change: transform;
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
}

.mobile_btn_block:hover:before {
    left: calc(100% - 46px);
}

.mobile_btn_block .mobile_btn {
    width: 100%;
    height: 100%;
    padding: var(--offset-sm-s);
    align-items: center;
    display: flex;
    position: relative;
}

.mobile_btn_block .mobile_btn_img {
    width: var(--height-md-2xl);
    height: var(--height-md-2xl);
}

.mobile_btn_block .mobile_btn_content {
    margin-left: var(--offset-sm-s);
    flex-flow: column;
    align-items: flex-start;
    display: flex;
}

.mobile_btn_block .mobile_btn .top {
    color: var(--color-white);
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
}

.mobile_btn_block .mobile_btn .bottom {
    color: var(--color-white);
    font-family: "Nunito Sans", sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 30px;
}

@media (min-width: 768px) {
    .device_desc {
        margin-bottom: var(--offset-lg-l);
    }

    .device_wrapper {
        max-width: none;
        margin: 0;
    }

    .device_image {
        width: 1013px;
        height: 618px;
        margin-bottom: var(--offset-lg-m);
    }

    .device_content {
        align-items: flex-start;
    }

    .device .slider {
        width: 100%;
    }

    .device .slider_statistics {
        margin-bottom: var(--offset-sm-xl);
    }

    .statistics_img {
        width: 52px;
        height: 52px;
    }

    .statistics_top {
        font-size: 14px;
    }

    .statistics_bottom {
        font-size: 36px;
    }

    .cards_box {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .cards_box_cards {
        margin-top: 0;
        height: 144px;
    }

    .cards_box .card {
        width: 100%;
        padding: var(--offset-md-2xs);
        height: 96px;
    }

    .cards_box_dots {
        margin-left: var(--offset-lg-s);
        margin-right: var(--offset-sm-l);
        flex-direction: column;
        display: flex;
        transform: translateY(-24px);
    }

    .cards_box_dots .dot {
        margin-right: 0;
        margin-bottom: var(--offset-sm-s);
    }

    .device_content>.statistics {
        margin-bottom: var(--offset-md-2xs);
    }

    .statistics_img {
        width: 52px;
        height: 52px;
    }

    .statistics_top {
        font-size: 14px;
    }

    .statistics_bottom {
        font-size: 36px;
    }

    .device_buttons {
        flex-direction: row;
    }

    .device_block_button {
        margin-bottom: 0;
        margin-right: var(--offset-md-2xs);
    }

    .mobile_btn_block {
        border-radius: var(--border-radius-m);
        width: 288px;
        height: 68px;
        position: relative;
        overflow: hidden;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1360px;
    }

    .device_wrapper {
        align-items: center;
        gap: var(--offset-lg-s);
        grid-template-columns: 35vw 1fr;
        grid-template-areas: "img content";
        min-height: 468px;
        display: grid;
        position: relative;
    }

    .device_image {
        grid-area: img;
        width: 768px;
        height: 468px;
        margin: 0;
        position: absolute;
        left: auto;
        right: 0;
    }

    .device_content {
        grid-area: content;
    }

    .cards_box_cards {
        width: 464px;
        height: 192px;
    }

    .cards_box .card {
        height: 144px;
    }

    .cards_box .card_text {
        font-size: 16px;
    }

    .device_block_button {
        margin-right: var(--offset-sm-l);
    }

    .mobile_btn_block {
        width: 224px;
    }
}

@media (min-width: 1360px) {
    .device_wrapper {
        justify-content: center;
        gap: var(--offset-lg-3xl);
        grid-template-columns: 640px 1fr;
        min-height: 618px;
    }

    .device_image {
        width: 1013px;
        height: 618px;
    }
}