

/* основной белый блок со скруглением 30px (стили для ПК по умолчанию) */
.usin_content {
    margin: 0px auto 60px auto;
}

/* внутренняя обёртка: раскладка для ПК — две колонки */
.usin_content__inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 60px;
    justify-content: space-between;
}

/* левая колонка */
.usin_content__left {
    flex: 0 0 calc(50% - 60px);
}

.usin_content__title {
    margin: 0px 0 30px ;
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    color: #12283F;
}

.usin_content__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #6a6d7a;

}

/* кнопка-ссылка "Перейти" */
.usin_content__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border-radius: 999px;
    border: 1px solid #e5662f;
    font-size: 14px;
    line-height: 1;
    color: #e5662f;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}

.usin_content__button:hover {
    background-color: #e5662f;
    color: #ffffff;
}

/* правая колонка */
.usin_content__right {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(50% - 30px);
    justify-content: center;
}

.usin_content__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 40px 60px 60px 60px;

}

/* одна карточка */
.usin_content__item {
    position: relative;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    padding: 30px 60px 30px 96px;
    background-color: #f8f3ef;
    border-radius: 20px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #12283F;
    overflow: hidden;
    text-decoration: none;
}

.usin_content__item:hover {
    transition: 0.2s;
    color: #12283F;
    background-color: #eee3da;
    text-decoration: none;
}

/* левая большая иконка: вставляем svg через background-image */
.usin_content__item::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* правая маленькая стрелка */
.usin_content__item::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M10.1104 5.34882C10.6143 5.63674 10.6143 6.36326 10.1104 6.65118L1.87211 11.3588C1.37211 11.6445 0.75 11.2835 0.75 10.7076L0.750001 1.29238C0.750001 0.716517 1.37211 0.355492 1.8721 0.641202L10.1104 5.34882Z' fill='rgb(229,102,47)'/></svg>");
}

.usin_content__item_title {
    /* текст внутри карточки */
    text-align: right;
}

.usin_content__item_type_news::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' stroke='rgb(253,253,253)' stroke-width='3.61837' stroke-linecap='round' stroke-linejoin='round' fill='none'><g transform='rotate(-14 36 36)'><rect x='14' y='16' width='44' height='40' rx='4' ry='4'/><line x1='22' y1='24' x2='50' y2='24'/><line x1='22' y1='30' x2='46' y2='30'/><rect x='22' y='36' width='12' height='10'/><line x1='38' y1='38' x2='50' y2='38'/><line x1='38' y1='44' x2='48' y2='44'/></g></svg>");
}
.usin_content__item_type_press::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' stroke='rgb(253,253,253)' stroke-width='3.61837' stroke-linecap='round' stroke-linejoin='round' fill='none'><g transform='translate(36 36) scale(1.1) rotate(-14) translate(-36 -36)'><rect x='16' y='18' width='34' height='36' rx='4' ry='4' vector-effect='non-scaling-stroke'/><line x1='22' y1='24' x2='44' y2='24' vector-effect='non-scaling-stroke'/><line x1='22' y1='30' x2='42' y2='30' vector-effect='non-scaling-stroke'/><line x1='22' y1='36' x2='38' y2='36' vector-effect='non-scaling-stroke'/><line x1='22' y1='42' x2='36' y2='42' vector-effect='non-scaling-stroke'/><polygon points='42 38 52 36 52 46 42 44' vector-effect='non-scaling-stroke'/><line x1='42' y1='44' x2='40' y2='48' vector-effect='non-scaling-stroke'/><line x1='52' y1='38' x2='58' y2='34' vector-effect='non-scaling-stroke'/><line x1='52' y1='44' x2='59' y2='44' vector-effect='non-scaling-stroke'/></g></svg>");
}
.usin_content__item_type_sale::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' stroke='rgb(253,253,253)' stroke-width='3.61837' stroke-linecap='round' stroke-linejoin='round' fill='none'><g transform='rotate(-14 36 36)'><polygon points='36 11 61 24 61 48 36 61 11 48 11 24'/><circle cx='31' cy='32' r='3.6'/><circle cx='41' cy='40' r='3.6'/><line x1='39' y1='30' x2='33' y2='42'/></g></svg>");
}

/* ------------------------------------
   ИКОНКА 1: ФИРМЕННЫЙ МЕРЧ (футболка)
   ------------------------------------ */
.usin_content__item_type_merch::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><path d='M16.5102 20.5953L23.5131 18.7189C23.5131 18.7189 25.3896 25.7219 32.3925 23.8454C39.3955 21.969 37.519 14.966 37.519 14.966L44.522 13.0896M48.9004 29.4298L54.1544 49.0381C54.2539 49.4096 54.2018 49.8054 54.0095 50.1384C53.8172 50.4715 53.5005 50.7145 53.1291 50.814L27.9184 57.5692C27.547 57.6687 27.1512 57.6166 26.8181 57.4243C26.4851 57.232 26.2421 56.9153 26.1425 56.5439L20.8885 36.9356M44.522 13.0896L56.0049 14.4587C56.3867 14.5043 56.7347 14.6998 56.9724 15.0021C57.2102 15.3044 57.3181 15.6887 57.2724 16.0705L56.02 26.5789C55.9856 26.8666 55.8658 27.1373 55.6761 27.3563C55.4864 27.5752 55.2354 27.7323 54.9556 27.8073L48.9004 29.4298M16.5102 20.5953L7.25025 27.5224C6.94241 27.7529 6.73873 28.0962 6.68401 28.4768C6.62929 28.8575 6.72801 29.2443 6.95846 29.5521L13.2973 38.0264C13.4709 38.2584 13.71 38.433 13.9838 38.5277C14.2576 38.6225 14.5534 38.6331 14.8333 38.5581L20.8885 36.9356' stroke='rgb(253,253,253)' stroke-width='3.61837' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
}

/* ------------------------------------
   ИКОНКА 2: КНИГИ
   ------------------------------------ */
.usin_content__item_type_books::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><path d='M14.3408 31.1841C12.5719 24.5827 11.6869 21.2796 13.1896 18.6803C14.6893 16.0793 17.9924 15.1942 24.5938 13.4253L33.9311 10.9234C40.5326 9.15457 43.8356 8.26952 46.435 9.77222C49.036 11.272 49.921 14.575 51.6899 21.1765L56.6937 39.851C58.4626 46.4525 59.3476 49.7556 57.8449 52.3549C56.3452 54.9559 53.0421 55.841 46.4407 57.6098L37.1034 60.1118C30.5019 61.8806 27.1989 62.7657 24.5995 61.263C21.9985 59.7632 21.1135 56.4602 19.3446 49.8587L14.3408 31.1841Z' stroke='white' stroke-width='3.625' fill='none'/><path d='M56.4558 39.915L28.4439 47.4208C26.273 48.0025 25.1875 48.2933 24.3596 48.7703C23.2575 49.4069 22.3424 50.3224 21.7063 51.4248C21.0701 52.5272 20.7354 53.7777 20.7358 55.0504' stroke='white' stroke-width='3.625' fill='none'/><path d='M23.0527 26.3481L41.7273 21.3443M25.2419 34.5183L36.9135 31.3909' stroke='white' stroke-width='3.625' stroke-linecap='round' fill='none'/></svg>");
}

/* ------------------------------------
   ИКОНКА 3: ДЕЛОВОЙ ТУРИЗМ
   ------------------------------------ */
.usin_content__item_type_travel::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'><path d='M19.9708 52.1931L21.2217 56.8617L58.5708 46.854L57.3199 42.1854L19.9708 52.1931ZM20.0934 24.6391L18.8425 19.9704C18.4985 18.6866 18.6616 17.4653 19.3319 16.3066C20.0022 15.1479 20.9783 14.396 22.2602 14.0508L36.2661 10.298C37.55 9.95395 38.772 10.1169 39.9323 10.7867C41.0925 11.4566 41.8437 12.4329 42.1857 13.7157L43.4367 18.3843L50.4396 16.5079C51.7235 16.1638 52.9455 16.3268 54.1058 16.9966C55.266 17.6665 56.0172 18.6428 56.3592 19.9255L63.2395 45.6031C63.5835 46.8869 63.4214 48.1088 62.753 49.2686C62.0847 50.4284 61.1077 51.1798 59.8218 51.5227L22.4727 61.5303C21.1888 61.8743 19.9677 61.712 18.8095 61.0433C17.6512 60.3745 16.8991 59.3977 16.5531 58.1127L9.6728 32.4351C9.32878 31.1512 9.49192 29.93 10.1622 28.7713C10.8325 27.6126 11.8086 26.8607 13.0905 26.5155L20.0934 24.6391ZM18.0943 45.1901L55.4434 35.1824L51.6906 21.1765L44.6876 23.0529L45.9386 27.7216L41.2699 28.9725L40.019 24.3039L26.013 28.0568L27.264 32.7254L22.5954 33.9764L21.3444 29.3077L14.3414 31.1842L18.0943 45.1901ZM24.7621 23.3881L38.768 19.6353L37.5171 14.9666L23.5111 18.7195L24.7621 23.3881Z' fill='white'/></svg>");
}


main .usin_content ul {
    list-style: disc outside;
    padding: 0;

}
main .usin_content ul li{
    margin: 20px;
}


/* адаптив: до 767px — мобильная версия (одна колонка, меньшие отступы и шрифты) */
@media (max-width: 1200px) {
    .usin_content__inner {
        gap: 10px;
    }
    .usin_content__item {
        font-size: calc(15px + 1vw);
        line-height: 1.1;
    }
    .usin_content__title {
        font-size: calc(33px + 1vw);
    }
    .usin_content__left {
        flex: 0 0 calc(40% - 60px);
    }
    .usin_content__right {
        flex: 0 0 calc(60% - 30px);
    }

}

@media (max-width: 900px) {
    .usin_content {
        padding: 30px 30px;
    }

    .usin_content__inner {
        flex-direction: column;
        gap: 24px;
    }

    .usin_content__left {
        flex: 0 0 auto;
    }

    .usin_content__right {
        flex: 0 0 auto;
    }


}

/* подстройка под очень маленькие экраны */
@media (max-width: 480px) {
    .usin_content__title {
        font-size: calc(26px + 1vw);
    }
    .usin_content {
        padding: 20px;
    }

    .usin_content__item {
        padding: 20px 44px 20px 86px;
        font-size: 16px;
    }

    .usin_content__item::before {
        width: 48px;
        height: 48px;
        left: 18px;
    }
}
