@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 500px) {

    .hubs-sorting-name {
        width: 30%;
    }
    .hubs-sorting-count {
        width: 70%;
    }

}

/* universal 380px < (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 379px) {

    .hubs-sorting {
        width: 310px;
        height: 20px;
        justify-content: space-between;
    }

    .arrow-block {
        width: 13px;
        height: 13px;
        left: 59.5%;
        bottom: 19%;
    }
    .arrow-block-up {
        bottom: 18%;
    }

    .arrow-block-box {
        width: 6px;
        height: 1.25px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 4.85px;
        height: 1px;
        right: -1.25px;
    }
    .arrow-block-box::before {
        top: 1.5px;
    }
    .arrow-block-box::after {
        top: -1.5px;
    }

    .hub-block {
        width: 310px;
    }

    .hub-image {
        max-width: 31px;
        min-width: 31px;
        max-height: 31px;
        min-height: 31px;
    }

    .hub-link-and-description {
        margin-left: 10px;
    }
    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 12px;
    }
    .hub-description {
        font-size: 10.5px;
    }

}

/* universal 380px > and 479px < (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 380px) and (max-device-width: 478px) {

    .hubs-sorting {
        width: 320px;
    }
    .hub-block {
        width: 320px;
    }

    .hub-image {
        max-width: 35px;
        min-width: 35px;
        max-height: 35px;
        min-height: 35px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 12.5px;
    }
    .hub-description {
        font-size: 11.5px;
    }

    .arrow-block {
        left: 70.5%;
    }
    .arrow-block-up {
        bottom: 23%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* universal 479px > (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 479px) and (max-device-width: 500px) {

    .hubs-sorting {
        width: 420px;
    }
    .hub-block {
        width: 420px;
    }

    .hub-image {
        max-width: 35px;
        min-width: 35px;
        max-height: 35px;
        min-height: 35px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 14px;
    }
    .hub-description {
        font-size: 13.5px;
    }

    .arrow-block {
        left: 55.5%;
    }
    .arrow-block-up {
        bottom: 23%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* iPhone 5, 5S, 5C, 5 SE (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 352px) and (-webkit-min-device-pixel-ratio: 2) {

    .hubs-sorting {
        width: 280px;
        height: 20px;
        justify-content: space-between;
    }

    .arrow-block {
        width: 13px;
        height: 13px;
        left: 65.5%;
        bottom: 19%;
    }
    .arrow-block-up {
        bottom: 18%;
    }

    .arrow-block-box {
        width: 6px;
        height: 1.25px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 4.85px;
        height: 1px;
        right: -1.25px;
    }
    .arrow-block-box::before {
        top: 1.5px;
    }
    .arrow-block-box::after {
        top: -1.5px;
    }

    .hub-block {
        width: 280px;
    }

    .hub-image {
        max-width: 30px;
        min-width: 30px;
        max-height: 30px;
        min-height: 30px;
    }

    .hub-link-and-description {
        margin-left: 10px;
    }
    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 12px;
    }
    .hub-description {
        font-size: 10px;
    }

}

/* Pixel 4 (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 353px) and (max-device-width: 359px) and (-webkit-min-device-pixel-ratio: 2) {

    .hubs-sorting {
        width: 310px;
    }
    .hub-block {
        width: 310px;
    }

    .hub-image {
        max-width: 33px;
        min-width: 33px;
        max-height: 33px;
        min-height: 33px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 11.5px;
    }
    .hub-description {
        font-size: 11.5px;
    }

    .arrow-block {
        left: 62.5%;
        bottom: 23%;
    }
    .arrow-block-up {
        bottom: 15%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* Galaxy note 3, Galaxy S3, Galaxy S3 and other with 360px width (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 360px) and (max-device-width: 374px) and (-webkit-min-device-pixel-ratio: 2) {

    .hubs-sorting {
        width: 320px;
    }
    .hub-block {
        width: 320px;
    }

    .hub-image {
        max-width: 35px;
        min-width: 35px;
        max-height: 35px;
        min-height: 35px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 12.5px;
    }
    .hub-description {
        font-size: 12px;
    }

    .arrow-block {
        left: 60.5%;
        bottom: 23%;
    }
    .arrow-block-up {
        bottom: 15%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* iPhone 6, 6S, 7, 8, SE 2020 (портретный режим) */
/* iPhone X, XS, 11 Pro, 13 mini (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2) { 

    .hubs-sorting {
        width: 330px;
    }
    .hub-block {
        width: 330px;
    }

    .hub-image {
        max-width: 36px;
        min-width: 36px;
        max-height: 36px;
        min-height: 36px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 12.5px;
    }
    .hub-description {
        font-size: 12px;
    }

    .arrow-block {
        left: 69.5%;
        bottom: 23%;
    }
    .arrow-block-up {
        bottom: 15%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* LG Optimus, Nexus and other with 384px width (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 384px) and (max-device-width: 389px) and (-webkit-min-device-pixel-ratio: 2) {

    .hubs-sorting {
        width: 350px;
    }
    .hub-block {
        width: 350px;
    }

    .hub-image {
        max-width: 36px;
        min-width: 36px;
        max-height: 36px;
        min-height: 36px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 12.5px;
    }
    .hub-description {
        font-size: 12px;
    }

    .arrow-block {
        left: 67.5%;
        bottom: 27%;
    }
    .arrow-block-up {
        bottom: 23%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* iPhone 12, 12 Pro, 13, 13 Pro, Apple iPhone 14 (портретный режим) */
/* iPhone 14 Pro, Apple iPhone 15, Apple iPhone 15 Pro, Apple iPhone 16 (--- 393px ---) (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 390px) and (max-device-width: 413px) and (-webkit-device-pixel-ratio: 3) {

    .hubs-sorting {
        width: 350px;
    }
    .hub-block {
        width: 350px;
    }

    .hub-image {
        max-width: 36px;
        min-width: 36px;
        max-height: 36px;
        min-height: 36px;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 13px;
    }
    .hub-description {
        font-size: 12.5px;
    }

    .arrow-block {
        left: 64.5%;
        bottom: 27%;
    }
    .arrow-block-up {
        bottom: 24%;
    }
    .arrow-block-box {
        width: 8px;
        height: 2px;
    }
    .arrow-block-box::before, .arrow-block-box::after {
        width: 7px;
        height: 2px;
        right: -2.5px;
    }
    .arrow-block-box::before {
        top: 2px;
        transform: rotate(-45deg);
    }
    .arrow-block-box::after {
        top: -2px;
        transform: rotate(45deg);
    }

}

/* iPhone 6+, 7+, 8+ (портретный режим) */
/* iPhone XS Max, XR, 11, 11 Pro Max (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-width: 427px) and (-webkit-min-device-pixel-ratio: 3) {

    .hubs-sorting {
        width: 370px;
    }
    .hub-block {
        width: 370px;
    }

    .hub-image {
        max-width: 37px;
        min-width: 37px;
        max-height: 37px;
        min-height: 37px;
    }

    .arrow-block {
        left: 61.5%;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 14px;
    }
    .hub-description {
        font-size: 12px;
    }

}

/* iPhone 16 Pro Max (портретный режим) */
/* iPhone 12 Pro Max, 13 Pro Max, Apple iPhone 14 Plus (--- 428px ---) (портретный режим) */
/* iPhone 14 Pro Max, iPhone 15 Plus, Apple iPhone 15 Pro Max (--- 430px ---) (портретный режим) */
@media only screen and (orientation: portrait) and (min-device-width: 428px) and (max-device-width: 500px) and (-webkit-device-pixel-ratio: 3) {

    .hubs-sorting {
        width: 380px;
    }
    .hub-block {
        width: 380px;
    }

    .hub-image {
        max-width: 37px;
        min-width: 37px;
        max-height: 37px;
        min-height: 37px;
    }

    .arrow-block {
        left: 59.5%;
    }

    .abbr-name, .hub-link, .hub-block-count-data {
        font-size: 14px;
    }
    .hub-description {
        font-size: 12px;
    }

}

/* -- -- -- -- -- */
/* - LANDSCAPE - */
/* -- -- -- -- -- */

/* universal 700px < (альбомный режим) */
@media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 700px) {

    .hubs-sorting-name, .hubs-sorting-count {
        width: 50%;
    }
    .arrow-block {
        left: 26.5%;
    }

    .hubs-sorting {
        width: 520px;
    }
    .hub-block {
        width: 520px;
    }

    .hub-image {
        max-width: 39px;
        min-width: 39px;
        max-height: 39px;
        min-height: 39px;
    }

    .abbr-name, .hub-link, .hub-block-count-data, .hub-description {
        font-size: 14px;
    }

}