I want that cards moves from right to left with same height and width as shown in picture which works fine but i am getting window horizontally scrollable which i don't want. When i am putting width:100% the card width reduced which i don't want. when the number of cards is less everything works fine but not with no of cards increases. So please help me to get this work as i want.
Like cards should be the same height and width as shown in picture without horizontally scrollable window
.main-ind-card { box-sizing: border-box; display:inline-flex; flex-direction: row; /*align-content : flex-start;*/ /*!*max-width: fit-content;*!*/ /*align-items: flex-start;*/ overflow-x:hidden; align-items: stretch;}.ind-card { width: 280px; height: 150px; max-width:100%; background: rgb(17, 4, 134); border-radius: 15px; box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px; /*display: flex;*/ color: white; justify-content: center; position: relative; flex-direction: row; align-items: center; background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85)); cursor: pointer; transition: all 0.3s ease-in-out; overflow: hidden; margin-left:20px; box-sizing: border-box; animation: ind-card 8s infinite linear;margin-right:auto;}@keyframes ind-card { 0% { transform: translateX(0px) } 33.333% { transform: translateX(-200px) } 66.666% { transform: translateX(-400px) } 99.999% { transform: translateX(-600px) } 100% { transform: translateX(0px) }}.ind-card:hover { box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px;}.top { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; margin-block-end: .5rem;}.pfp { position: relative; height: 40px; width: 40px; background-color: white; border-radius: 5px; display: flex; justify-content: center; align-items: center;}.title-1 { color: white; font-size: 1.25rem; font-weight: 900;}.playing { display: flex; position: relative; justify-content: center; gap: 1px; width: 30px; height: 20px;}.greenline { background-color: #1db954; height: 20px; width: 2px; position: relative; transform-origin: bottom;}.line-1 { animation: infinite playing 1s ease-in-out; animation-delay: 0.2s;}.line-2 { animation: infinite playing 1s ease-in-out; animation-delay: 0.5s;}.line-3 { animation: infinite playing 1s ease-in-out; animation-delay: 0.6s;}.line-4 { animation: infinite playing 1s ease-in-out; animation-delay: 0s;}.line-5 { animation: infinite playing 1s ease-in-out; animation-delay: 0.4s;}@keyframes playing { 0% { transform: scaleY(0.1); } 33% { transform: scaleY(0.6); } 66% { transform: scaleY(0.9); } 100% { transform: scaleY(0.1); }}<div class="main-ind-card"><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card"><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div><div class="ind-card" width="280px" height="150px";><div class="top"><div class="pfp"><div class="playing"><div class="greenline line-1"></div><div class="greenline line-2"></div><div class="greenline line-3"></div><div class="greenline line-4"></div><div class="greenline line-5"></div></div></div><div class="texts"><p class="title-1">Real Estate</p></div></div></div></div>