@media (min-height: 1024px) and (min-width: 768px) {
    .visual {
        top: auto;
        margin-top: 0;
        bottom: 0;
    }
}

@media (max-height: 820px) and (min-width: 768px) {
    .visual {
        top: -102px;
        margin-top: 0;
    }
}

@media (max-height: 640px) and (min-width: 768px) {
    .card__content {
        padding: 20%;
    }

    .card__share {
        padding-bottom: 9%;
    }

    .card__share-title {
        display: none;
    }
}

@media (max-width: 1799px) {
    .visual__bubble_left {
        margin-right: 190px;
    }

    .visual__bubble_right {
        margin-left: 140px;
    }
}

@media (max-width: 1599px) {
    .visual__bubble {
        font-size: 8px;
    }

    .visual__bubble_left {
        margin-right: 170px;
    }

    .visual__bubble_right {
        margin-left: 100px;
    }
}

@media (max-width: 1239px) {
    .visual__bubble {
        font-size: 6px;
    }
}

@media (max-width: 999px) {
    .visual__bubble {
        font-size: 5px;
    }

    .visual__bubble_left {
        margin-right: 100px;
    }

    .visual__bubble_right {
        margin-left: 60px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 12px;
    }

    .visual-popup {
        font-size: 12px;
        padding: 15px 0 5px;
    }

    .visual-popup__close {
        width: 50px;
        height: 30px;
    }

    .visual-popup__close:before {
        width: 10px;
        height: 10px;
        margin: -5px;
    }

    html.is-text-popup-open .visual-popup__close:before {
        transform: translateY(-2px) rotate(45deg);
    }

    .visual {
        width: 512px;
        height: 512px;
        margin-top: -256px;
        margin-left: -256px;
    }

    .visual__ball-btn {
        width: 110px;
    }

    .visual__ball-btn-text {
        font-size: 16px;
    }

    .card {
        width: 310px;
        max-height: 450px;
        font-size: 12px;
    }

    .card__share-title {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .ya-share2__icon {
        height: 21px !important;
        width: 21px !important;
        background-size: 22px 22px !important;
    }

    .visual__bubble {
        font-size: 4px;
    }

    .visual__bubble_left {
        margin-right: 50px;
    }

    .visual__bubble_right {
        margin-left: 30px;
    }
}

@media (max-width: 575px) {
    .visual__bubble {
        font-size: 3px;
    }
}

@media (max-width: 479px) {
    .visual__bubble_left {
        margin: 0 -4px 59px 0;
    }

    .visual__bubble_right {
        margin: 0 0 15px -32px;
    }
}

@media (min-height: 512px) and (max-width: 767px) {
    .visual {
        top: auto;
        margin-top: 0;
        bottom: 0;
    }
}