Как не обрезать тень элемента, используя "overflow: hidden"?

Сергей delphinpro и Арсений Матыцин
Как можно увидеть в коде по ссылке https://codepen.io/tracktor/pen/OJeNaJe - внутренний отступ у контейнера присутствует, он равен как раз размеру тени (24 пикселя) + 5 пикселей при hover(в данном конкретном примере hover не реализовывал ещё - надо без него разобраться). И тень всё равно обрезается, как минимум, на третьем слайде, а если прокрутить дальше, то обрезается и на первом (потому что накладывается тень уехавшего за пределы контейнера слайда).

.container {
  display: flex; 
  align-items: center;
  gap: 32px;
  overflow: hidden;
  box-sizing: content-box;
  width: 960px;
  margin: 20px auto;
  padding: 29px;
}

alexalexes
Я правильно понял, что расстояние от одного слайда до другого должно быть размером "в две тени", то есть 24 + 24 = 48? Даже если так и сработало бы, по макету отступ между слайдами - 32 пикселя...
Но в любом случае, переделал свой пример, упростив значения для более удобного расчёта, и тень всё равно обрезается...

Приведите пожалуйста пример с кодом, чтобы не обрезалось, или укажите, что мне в моём примере надо исправить, если я чего-то ещё не понимаю...

Как не обрезать тень элемента, используя "overflow: hidden"?

Сделать для контейнера, у которого overflow:hidden, внутренний отступ 24 + 5 пикселей.

Ну вот у примера по ссылке уже есть такой внутренний отступ - и тень всё равно обрезается...

Vite + React: Как создать файл конфигурации собранного приложения?

Алексей Ярков,

начитались советов про то, что глобальные переменные зло ))

Абсолютно верно)) Так и учили...

Vite + React: Как создать файл конфигурации собранного приложения?

Алексей Ярков, действительно, сработало. Спасибо! Правда, всё равно этот способ слегка "костыльным" кажется...

Vite + React: Как создать файл конфигурации собранного приложения?

Алексей Ярков, Ну смотрите, у меня есть проект на React. Он собирается с помощью Vite. В самих исходниках надо использовать данные из настроек (тот самый файл settings.js). Если делать экспорт данных в settings.js, а в проекте делать импорт, то эти данные "зашиваются" в итоговую сборку. И даже если настроить Vite на сборку конкретного файла отдельно, то данные оттуда браться не будут (пробовал). А для реализации задуманного надо чтоб данные всегда брались из отдельного файла, даже когда проект собран. Либо как-то настроить Vite таким образом, чтобы он делал отдельный "чанк" файла с настройками, но при этом брал данные именно оттуда...

Vite + React: Как создать файл конфигурации собранного приложения?

А в проекте как эти данные использовать? Там же нет никакого window...
Есть globalThis, попробовал с ним, но всё равно не получилось...

Vite + React: Как создать файл конфигурации собранного приложения?

bit8 Собираю обычный фронтенд на реакте. Работать будет в браузере.
Файл читать чем-то типа readFileSync? Он же в браузере недоступен будет...
Можно пример в виде кода?