Сергей delphinpro

https://developer.mozilla.org/.../box-decoration-break

.tobuy-shance__title_accent {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Поддержка в целом неплохая, но с префиксом. https://caniuse.com/css-boxdecorationbreak

Вариантов несколько. Вот один из них:

Вот здесь гляньте https://habr.com/ru/articles/686748/

https://yandex.ru/search/?text=meta+viewport

https://developer.mozilla.org/en-US/docs/Web/CSS/:...

1. Применяется только к ссылкам и area
2. Не все стили применяются (в целях конфиденциальности), тень в список разрешенных не входит.

вы не дочитали определение, там дальше так:
Согласно MDN блок со значением position: absolute; позиционируется через свойства top:; left:; right:; bottom:; относительно ближайшего родителя со значением свойства position, отличным от static.

Псевдоэлемент на обертке

.slider {
  position: relative;
}
.slider::after {
  content: '';
  position:absolute;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent, black);
  width: 200px;
  z-index: 100;
}

Есть вариант задействовать переменные

Условный код:

:root {
  --left: 300px;
  --right: 200px;
}

.left {
  width: var(--left)
}

.right {
  width: var(--right)
}
.center {
  width: calc(100% - var(--left) - var(--right));
}

Соответственно, когда левая колонка скрыта:

.layout {
  --left: 0;
}

overflow: scroll сделает скроллбар всегда видимым, даже когда нет переполнения

Стесняюсь спросить: а что здесь нестандартного?
Я вам кажется уже отвечал по этой теме.
Как разделить (визуально) страницу на 4 части: 2 по горизонали, 2 по вертикали?

function getData() {
  return new Promise(resolve => {
    $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
        const kyrs = Math.ceil(100 / data.Valute.KZT.Value * data.Valute.EUR.Value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
        resolve(kurs);
    });
  })
}

function func1(kurs) {
  console.log(kurs);
}

function func2(kurs) {
  console.log(kurs);
}

async function go() {
  const kurs = await getData();
  $('#euro').html(kyrs);
  func1(kurs);
  func2(kurs);
}

go();

событие update (ну или drug, я в доку не вникал) слайдера - это источник значения при изменении его слайдером. Здесь получаем это значение и вписываем его в input

метод setValue наоборот устанавливает значение в слайдер

По событию onchange или oninput на поле ввода вы получаете введенное значение и методом setValue устанавливаете его в слайдер.

по кнопкам плюс/минус вы не трогаете слайдер. А устанавливаете значение в инпут и триггерите на инпуте событие onchange/oninput (по этому триггеру сработает обновление слайдера).

то есть у вас почти правильно. только вот эту дичь нужно убрать $input.val = args.value; вообще непонятно, что вы собирались этим сделать.
Добавить слушатель onchange на инпут
И немного поправить drug

да все правильно
https://codepen.io/delphinpro/pen/KKJqNoJ

Это изображение контентное, а не оформительское. На реальном сайте, его очевидно будут загружать через админку. Его следует ставить через тег img

<div class="person">
  <img class="person__photo" src="">
  <div class="person__wrapper">
    <div class="person__name">Имя фамилия</div>
    <div class="person__position">Должность</div>
  </div>
</div>

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.person__photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__wrapper {
  display: grid;
  gap: 0.25rem;
}
.person__name {}
.person__position {}

Сделайте такую сетку



Картинки разместите с объединением ячеек grid-row: span 2; или указанием конкретных грид-линий.

<table class="table">
    <tr>
        <td class="moccasin" colspan="2">&nbsp;</th>
        <td class="greenyellow">&nbsp;</th>
    </tr>
    <tr>
        <td class="moccasin" rowspan="2">&nbsp;</td>
        <td class="cyan" colspan="2"></td>
    </tr>
    <tr>
        <td class="cyan">&nbsp;</td>
        <td class="greenyellow">&nbsp;</td>
    </tr>
</table>
<style>
.table {
  width: 300px;
  height: 300px;
  border-spacing: 5px;
  border-collapse: separate;
  border: none;
}
.table td {
  width: 33%;
  height: 33%;
}
.moccasin {
  background: moccasin;
}
.greenyellow {
  background: greenyellow;
}
.cyan {
  background: cyan;
}
</style>