.quotes-section { background: #fff; padding: 20px 50px 0; position: relative; } .quotes-title { text-transform: uppercase; font-weight: 300; font-size: 24px; font-family: "MotoSans"; color: #001428; text-align: center; line-height: 34px; margin: 26px 0; } .quotes-title span { color: #001428; font-size: clamp(1.7rem, 2vw + 1rem, 2.2rem); font-weight: 500; } .quotes-list { display: flex; flex-flow: row wrap; gap: .5rem; overflow: hidden; padding: 40px 0  !important; margin: 0 auto 20px; } @media screen and (max-width: 640px) { .quotes-section { padding: 20px 20px 0; } .quotes-list { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; flex-direction: row; flex-wrap: nowrap; } } .div_btn_a_quotes { display: none; } @media screen and (max-width: 640px) { .div_btn_a_quotes { position: absolute; bottom: 55px; display: flex; gap: 10px; justify-content: center; width: 100%; left: 0; } .div_btn_a_quotes > a { width: 10px; height: 10px; border-radius: 100%; background: #00000073; } .div_btn_a_quotes > a:focus { background: #000e1d; } } .contain img { object-fit: contain; } .quotes-item { flex: 1; background: #f8f6f4; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; position: relative; padding: 2rem; min-height: 270px; text-align: center; color: #001428; max-width: 32%; height: 37rem; } @media screen and (max-width: 640px) { .quotes-item { scroll-snap-align: start; flex-shrink: 0; min-width: 100%; } } .quote-head-wrapper { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 2rem; } .quote-logo { display: flex; align-items: center; justify-content: center; border-radius: .5rem; width: 5rem; height: 5rem; overflow: hidden; } .quote-logo img { width: 100%; object-fit: cover; } .quote-view-more { font-size: 1rem; text-decoration: none; line-height: 32px; font-weight: 600; color: #001428; position: unset; margin-top: auto; border: 2px solid black; color: black; background-color: transparent; width: 75%; border-radius: 360rem; padding: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; transition: all .3s ease; } .quote-view-more p { margin: 0; font-size: 1rem; } .quote-view-more:hover { background-color: black; color: white; } .quote-container .content { position: relative; text-align: justify; font-size: 18px; color: #001428; line-height: 24px; font-weight: 500; margin: 20px 0 0; position: relative; } @media (max-width: 600px) { .quotes-title { text-align: center; font-size: 18px; line-height: 28px; max-width: 300px; margin: 0 auto; } .quotes-item { transform: scale(1); margin-bottom: 56px; } .h2-quote { font-size: 16px; line-height: 26px; } .quote-container .content { margin-top: 12px; font-size: 1rem; line-height: 22px; } } .h2-quote > a { text-decoration: none; margin-top: 10px; }