.section-problems {
    padding-bottom: 50px;
}

.problems {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    --gap: 50px;
    --elements: 1;
    margin: 0 auto;
    gap: var(--gap);
}

@media (min-width: 992px) {
    .problems {
        --gap: 20px;
        --elements: 2;
    }
}

.problems__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    order: 1;
}

@media (min-width: 992px) {
    .problems__media {
        flex-basis: 30%;
        flex-grow: 0;
    }
}

.problems__media img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
}

@media (min-width: 992px) {
    .problems__tabs {
        order: 1;
        flex-grow: 1;
        flex-shrink: 1;
    }
}

.problems__media, .problems__tabs {
    width: calc((100% - (var(--elements) - 1) * var(--gap)) / (var(--elements)));
}

.problems__tabs-nav {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-radius: 30px;
    width: 100%;
    gap: 10px;
    counter-reset: problems 2;
}

.problems__nav-item {
    position: relative;
    flex-grow: 1;
    min-width: 107px;
}

.problems__nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    top: -1px;
    border-radius: 30px;
    padding: 10px;
    width: 100%;
    height: calc(100% + 2px);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 110%;
    text-align: center;
    color: inherit;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, fill .3s ease-in-out;
    box-shadow: var(--box-shadow-red);
}

.problems__nav-btn:hover {
    background-color: #ffe3db;
}

.problems__nav-btn:before {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    counter-increment: problems 1;
    content: counter(problems);
    display: block;
    font-size: 80px;
    font-weight: bold;
    color: transparent;
    line-height: 1;
    font-style: italic;
    z-index: 3;
}

.problems__nav-btn:focus {
    outline: var(--light-color);
}

.problems__nav-btn svg {
    z-index: 2;
}

.problems__nav-item.js-active .problems__nav-btn {
    background-image: var(--gradient-orange-to-red);
    pointer-events: none;
    z-index: 3;
    border: none;
}

.problems__nav-item.js-active .problems__nav-btn::before {
    color: var(--light-color);
}

.problems__caption {
    font-weight: 700;
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 120%;
    color: var(--primary-color);
    transition: color .3s ease-in-out;
}

.problems__nav-item.js-active .problems__caption {
    color: var(--light-color);
}

.problems__tabs-content {
    padding: 20px;
    border-radius: 30px;
    box-shadow: var(--box-shadow-red);
}

@media (min-width: 576px) {
    .problems__tabs-content {
        padding: 32px;
    }
}

.problems__tabs-content .wpremark {
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}

@media (min-width: 576px) {
    .problems__tabs-content .wpremark {
        flex-direction: row;
        gap: 0;
    }
}

.problems__tabs-block ul {
    list-style-type: none;
    padding-left: 10px;
}

@media (min-width: 576px) {
    .problems__tabs-block ul {
        padding-left: 20px;
    }
}

.problems__tabs-block ul li {
    padding-left: 22px;
    margin-bottom: 9px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 8 8' fill='%23ff4019'%3e%3cpath d='M7.763 2.095L5.845 4.014l1.9 1.9c.34.339.34.89 0 1.23l-.615.615a.87.87 0 0 1-1.23 0L4 5.859l-1.9 1.9a.87.87 0 0 1-1.23 0l-.616-.616a.868.868 0 0 1 0-1.23l1.9-1.9L.237 2.096a.87.87 0 0 1 0-1.23L.852.25c.34-.34.89-.34 1.23 0L4 2.168 5.918.25c.34-.34.89-.34 1.23 0l.615.615c.34.34.34.89 0 1.23z'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
}

.problems__tabs-block ul li span {
    font-weight: 700;
}

.problems__tabs-block p:not(:last-child) {
    margin-bottom: 15px;
}

.abc {
    position: relative;
    background-color: var(--accent-color);
    border-radius: 20px;
    box-shadow: 10px 10px #ffe3db;
    align-self: center;
    max-width: 130px;
    transform: translatey(0px);
    animation: float-first 5s ease-in-out infinite;
}

.abc:after {
    transform: translateY(0px);
    animation: float-second 5s ease-in-out infinite;
    content: ".";
    font-weight: bold;
    -webkit-text-fill-color: var(--accent-color);
    text-shadow: 22px 22px #ffe3db;
    text-align: left;
    font-size: 55px;
    width: 55px;
    height: 11px;
    line-height: 30px;
    border-radius: 11px;
    background-color: var(--accent-color);
    position: absolute;
    display: block;
    bottom: -30px;
    left: 0;
    box-shadow: 22px 22px #ffe3db;
    z-index: -2;
}

@keyframes float-first {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes float-second {
    0% {
        line-height: 30px;
        transform: translateY(0px);
    }

    55% {
        transform: translateY(-20px);
    }

    60% {
        line-height: 10px;
    }

    100% {
        line-height: 30px;
        transform: translateY(0px);
    }
}

.abc-text {
    position: absolute;
    left: 50%;
    top: 50%;
    color: var(--light-color);
    font-size: 100px;
    filter: url(#gooey);
}

.abc-text::before,
.abc-text::after {
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation-duration: 39s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    filter: blur(3px);
    line-height: 1;
}

.abc-text::before {
    content: "Л";
    animation-name: items-odd;
}

.abc-text::after {
    content: "Р";
    animation-name: items-even;
    animation-delay: 1.5s;
}

@keyframes items-odd {
    2.5641025641% {
        opacity: 1;
    }
    3.8461538462% {
        opacity: 1;
    }
    6.4102564103% {
        opacity: 0;
    }
    7.6923076923% {
        opacity: 0;
    }
    10.2564102564% {
        opacity: 1;
    }
    11.5384615385% {
        opacity: 1;
    }
    14.1025641026% {
        opacity: 0;
    }
    15.3846153846% {
        opacity: 0;
    }
    17.9487179487% {
        opacity: 1;
    }
    19.2307692308% {
        opacity: 1;
    }
    21.7948717949% {
        opacity: 0;
    }
    23.0769230769% {
        opacity: 0;
    }
    25.641025641% {
        opacity: 1;
    }
    26.9230769231% {
        opacity: 1;
    }
    29.4871794872% {
        opacity: 0;
    }
    30.7692307692% {
        opacity: 0;
    }
    33.3333333333% {
        opacity: 1;
    }
    34.6153846154% {
        opacity: 1;
    }
    37.1794871795% {
        opacity: 0;
    }
    38.4615384615% {
        opacity: 0;
    }
    41.0256410256% {
        opacity: 1;
    }
    42.3076923077% {
        opacity: 1;
    }
    44.8717948718% {
        opacity: 0;
    }
    46.1538461538% {
        opacity: 0;
    }
    48.7179487179% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    52.5641025641% {
        opacity: 0;
    }
    53.8461538462% {
        opacity: 0;
    }
    56.4102564103% {
        opacity: 1;
    }
    57.6923076923% {
        opacity: 1;
    }
    60.2564102564% {
        opacity: 0;
    }
    61.5384615385% {
        opacity: 0;
    }
    64.1025641026% {
        opacity: 1;
    }
    65.3846153846% {
        opacity: 1;
    }
    67.9487179487% {
        opacity: 0;
    }
    69.2307692308% {
        opacity: 0;
    }
    71.7948717949% {
        opacity: 1;
    }
    73.0769230769% {
        opacity: 1;
    }
    75.641025641% {
        opacity: 0;
    }
    76.9230769231% {
        opacity: 0;
    }
    79.4871794872% {
        opacity: 1;
    }
    80.7692307692% {
        opacity: 1;
    }
    83.3333333333% {
        opacity: 0;
    }
    84.6153846154% {
        opacity: 0;
    }
    87.1794871795% {
        opacity: 1;
    }
    88.4615384615% {
        opacity: 1;
    }
    91.0256410256% {
        opacity: 0;
    }
    92.3076923077% {
        opacity: 0;
    }
    94.8717948718% {
        opacity: 1;
    }
    96.1538461538% {
        opacity: 1;
    }
    98.7179487179% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
    0% {
        content: "A";
    }
    7.6922076923% {
        content: "A";
    }
    7.6923076923% {
        content: "У";
    }
    15.3845153846% {
        content: "У";
    }
    15.3846153846% {
        content: "Ы";
    }
    23.0768230769% {
        content: "Ы";
    }
    23.0769230769% {
        content: "Б";
    }
    30.7691307692% {
        content: "Б";
    }
    30.7692307692% {
        content: "М";
    }
    38.4614384615% {
        content: "М";
    }
    38.4615384615% {
        content: "Д";
    }
    46.1537461538% {
        content: "Д";
    }
    46.1538461538% {
        content: "Г";
    }
    53.8460538462% {
        content: "Г";
    }
    53.8461538462% {
        content: "Х";
    }
    61.5383615385% {
        content: "Х";
    }
    61.5384615385% {
        content: "Ф";
    }
    69.2306692308% {
        content: "Ф";
    }
    69.2307692308% {
        content: "З";
    }
    76.9229769231% {
        content: "З";
    }
    76.9230769231% {
        content: "Ш";
    }
    84.6152846154% {
        content: "Ш";
    }
    84.6153846154% {
        content: "Ч";
    }
    92.3075923077% {
        content: "Ч";
    }
    92.3076923077% {
        content: "Л";
    }
    99.9999% {
        content: "Л";
    }
}

@keyframes items-even {
    2.5641025641% {
        opacity: 1;
    }
    3.8461538462% {
        opacity: 1;
    }
    6.4102564103% {
        opacity: 0;
    }
    7.6923076923% {
        opacity: 0;
    }
    10.2564102564% {
        opacity: 1;
    }
    11.5384615385% {
        opacity: 1;
    }
    14.1025641026% {
        opacity: 0;
    }
    15.3846153846% {
        opacity: 0;
    }
    17.9487179487% {
        opacity: 1;
    }
    19.2307692308% {
        opacity: 1;
    }
    21.7948717949% {
        opacity: 0;
    }
    23.0769230769% {
        opacity: 0;
    }
    25.641025641% {
        opacity: 1;
    }
    26.9230769231% {
        opacity: 1;
    }
    29.4871794872% {
        opacity: 0;
    }
    30.7692307692% {
        opacity: 0;
    }
    33.3333333333% {
        opacity: 1;
    }
    34.6153846154% {
        opacity: 1;
    }
    37.1794871795% {
        opacity: 0;
    }
    38.4615384615% {
        opacity: 0;
    }
    41.0256410256% {
        opacity: 1;
    }
    42.3076923077% {
        opacity: 1;
    }
    44.8717948718% {
        opacity: 0;
    }
    46.1538461538% {
        opacity: 0;
    }
    48.7179487179% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    52.5641025641% {
        opacity: 0;
    }
    53.8461538462% {
        opacity: 0;
    }
    56.4102564103% {
        opacity: 1;
    }
    57.6923076923% {
        opacity: 1;
    }
    60.2564102564% {
        opacity: 0;
    }
    61.5384615385% {
        opacity: 0;
    }
    64.1025641026% {
        opacity: 1;
    }
    65.3846153846% {
        opacity: 1;
    }
    67.9487179487% {
        opacity: 0;
    }
    69.2307692308% {
        opacity: 0;
    }
    71.7948717949% {
        opacity: 1;
    }
    73.0769230769% {
        opacity: 1;
    }
    75.641025641% {
        opacity: 0;
    }
    76.9230769231% {
        opacity: 0;
    }
    79.4871794872% {
        opacity: 1;
    }
    80.7692307692% {
        opacity: 1;
    }
    83.3333333333% {
        opacity: 0;
    }
    84.6153846154% {
        opacity: 0;
    }
    87.1794871795% {
        opacity: 1;
    }
    88.4615384615% {
        opacity: 1;
    }
    91.0256410256% {
        opacity: 0;
    }
    92.3076923077% {
        opacity: 0;
    }
    94.8717948718% {
        opacity: 1;
    }
    96.1538461538% {
        opacity: 1;
    }
    98.7179487179% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
    0% {
        content: "О";
    }
    7.6922076923% {
        content: "О";
    }
    7.6923076923% {
        content: "И";
    }
    15.3845153846% {
        content: "И";
    }
    15.3846153846% {
        content: "Э";
    }
    23.0768230769% {
        content: "Э";
    }
    23.0769230769% {
        content: "П";
    }
    30.7691307692% {
        content: "П";
    }
    30.7692307692% {
        content: "Т";
    }
    38.4614384615% {
        content: "Т";
    }
    38.4615384615% {
        content: "Н";
    }
    46.1537461538% {
        content: "Н";
    }
    46.1538461538% {
        content: "К";
    }
    53.8460538462% {
        content: "К";
    }
    53.8461538462% {
        content: "В";
    }
    61.5383615385% {
        content: "В";
    }
    61.5384615385% {
        content: "С";
    }
    69.2306692308% {
        content: "С";
    }
    69.2307692308% {
        content: "Ц";
    }
    76.9229769231% {
        content: "Ц";
    }
    76.9230769231% {
        content: "Ж";
    }
    84.6152846154% {
        content: "Ж";
    }
    84.6153846154% {
        content: "Щ";
    }
    92.3075923077% {
        content: "Щ";
    }
    92.3076923077% {
        content: "Р";
    }
    99.9999% {
        content: "Р";
    }
}