.gallery { height: 200px; width: 100%; border: 1px solid #113768; border-radius: 25px; position: relative; overflow: hidden; } .scrollContainer { display: flex; height: 100%; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ } .scrollContainer::-webkit-scrollbar { display: none; /* WebKit */ } .slide { min-width: 100%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; scroll-snap-align: start; box-sizing: border-box; } .link { text-decoration: none; color: inherit; width: 100%; } .facebook { display: flex; justify-content: space-evenly; flex-direction: row; height: 100%; background-color: #fff; border-radius: 25px; padding: 40px 40px; box-sizing: border-box; } .facebookOne { font-family: 'Montserrat', sans-serif; font-weight: 900; color: #113768; font-size: 20px; margin: 0; } .facebookTwo { font-family: 'Montserrat', sans-serif; font-weight: 600; color: #113768; font-size: 13px; margin: 0; } .pagination { display: flex; flex-direction: row; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .dot { width: 10px; height: 10px; border-radius: 5px; margin: 0 5px; } .activeDot { background-color: #113768; } .inactiveDot { background-color: #ccc; } .textView { width: 60%; display: flex; flex-direction: column; justify-content: space-between; } .logoView { width: 40%; display: flex; justify-content: flex-end; align-items: flex-end; } /* Responsive adjustments */ @media (max-width: 768px) { .slide { min-width: calc(100% - 40px); padding: 0 20px; } .facebookOne { font-size: 18px; } .facebookTwo { font-size: 12px; } }