Проблема с подключением к тени с помощью горизонтальной свитки ⇐ CSS

[Anonymous]

Я относительно новичок в CSS и создаю веб -сайт с использованием HTML и CSS (без опыта работы с JavaScript). У меня есть горизонтальная секция прокрутки для некоторых «карт», используя сетку CSS. Каждая карта имеет тень, чтобы добавить некоторую глубину.
Проблема заключается в том, что тень коробки обрезается на левой стороне первой карты и правой стороны последней карты.
Что я пробовал до сих пор

[*]. Выравнивание секции отключено от остальной части веб-сайта, и во время прокрутки прокрутки в прокрутке возникает смещение. У теней было место, но у проставки было смягчено так же, как #1.
Переключение на Flexbox имела одинаковую проблему. Горизонтальный свиток, чтобы предотвратить обрезание коробки, и (b) выравнивает карту слева вместе со всеми другими элементами на веб-сайте? Class = "Snippet-Code">

Код: Выделить всё

:root {
/* Global Styles */
--spacing-unit: 1rem;
--margin-xs: calc(var(--spacing-unit)/2);
--margin-s: var(--spacing-unit);
--margin-m: calc(var(--spacing-unit)*2);
--margin-l: calc(var(--spacing-unit)*3);
--margin-xl: calc(var(--spacing-unit)*4);
}

* {
margin: 0;
box-sizing: border-box;
}

body {
width: 80%;
margin: 0 auto;
}

.scroll-section {
margin-bottom: var(--margin-xl);
}

.media-scroller {
display: grid;
gap: var(--margin-m);
grid-auto-flow: column;
grid-auto-columns: 22%;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
clip-path: -50px;
}

.snaps-inline {
scroll-snap-align: start;
}

.media-card {
background: url('images/media.png') no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0px 6px 10px rgba(0, 0, 0, .5);
border-radius: 25px;
aspect-ratio: 4 / 5;
display: flex;
flex-direction: column;
justify-content: end;
}< /code>


Content Lorem Ipsum


lorem ipsum
lorem ipsum lorem ipsum lorem ipsum

lorem ipsum
lorem ipsum lorem ipsum lorem ipsum

lorem ipsum
lorem ipsum lorem ipsum lorem ipsum

lorem ipsum
lorem ipsum lorem ipsum lorem ipsum

lorem ipsum
lorem ipsum lorem ipsum lorem ipsum

See More!
lorem ipsum
lorem ipsum lorem ipsum lorem ipsum

Подробнее здесь: https://stackoverflow.com/questions/796 ... tal-scroll