.img-container{ /* background-color: aqua; */ display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-evenly; align-content: stretch; margin: 2rem 0; padding-top: 1rem; } .category-img{ width:200px; height: auto; border-radius: 10%; } .category-heading, .cr-heading{ text-align: center; margin-top: 7rem; } /* carousel css */ h3 { text-align: center; margin: 6% auto; } .slider { /* background-color: #444; */ display: flex; margin:3rem 3rem; overflow-y: hidden; overflow-x: scroll !important; padding: 16px; transform: scroll(calc(var(--i,0)/var(--n)*-100%)); scroll-behavior: smooth; } .slider::-webkit-scrollbar { display: none; } .slider img:hover { transform: scale(1.05); } .slide { background-color:rgb(241, 241, 241); margin-right:20px; padding: 1rem; position: relative; width: 50%; } .cr-img-container{ display: flex; /* align-items: center; */ justify-content: center; height: 70%; } .slide img { max-width: 250px; height: auto; min-width: 40px; margin: 5px 2px; border-radius: 5px; } .cr-outer-container{ display: flex; align-items: center; } /* buttons */ .control-prev-btn, .control-next-btn { background-color: rgba(255, 255, 255, 0.55); width: 100px; border-radius: 20px; text-align: center; font-size: 2rem; user-select: none; color: #494d61; cursor: pointer; } .control-prev-btn:hover , .control-next-btn:hover{ color: #494d61; background-color: rgba(180, 180, 180, 0.5); } @media only screen and (max-width:480px){ .slide{ width: 80%; padding: 14px 10px; } .slider{ margin: 3rem 1rem; padding-left: 0; padding-right: 0; } .control-prev-btn, .control-next-btn { background-color: rgba(255, 255, 255, 0.55); width: 20px; border-radius: 20px; text-align: center; font-size: 1rem; user-select: none; color: #494d61; cursor: pointer; } }