.espot { margin: 2rem 0; } .espot-container { width: 100%; } .espot-title { color: #000; font-size: 20px; font-weight: 700; margin-bottom: 20px; margin-left: 20px; } .espot-list-container { overflow: auto; width: 100%; margin: 0 auto; } .espot-list { display: flex; list-style: none; margin: 0; padding: 0; overflow: hidden; margin: 0 20px 20px; } .espot-item { display: inline-block; width: 100px; height: 45px; position: relative; overflow: hidden; border-radius: 50px; background: #e6f4fa; margin-left: 0  !important; } .espot-item.hovered { background: #e6f4fa; } .espot-item.active { background: #0d5c91; pointer-events: none; } .espot-item.hovered a > .espot-text { color: #000; } .espot-item.hovered a > .espot-text-desc { display: inline-block; } .espot-item:not(:last-child) { margin-right: 20px; } .espot-item img { display: none; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); height: 100%; width: auto; z-index: -1; } .espot-item a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #fff; height: 100%; width: 100%; z-index: 1; } .espot-text { color: #000; display: inline-block; font-size: 21px; text-align: center; font-weight: 700; width: 100%; font-size: 13px; } .espot-item.active .espot-text { color: #fff; } .espot-text-desc { display: none; color: #000; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 15px; text-align: center; padding: 10px; } @media (min-width: 400px) { .espot-container { width: 100%; max-width: 1140px; margin: 0 auto; } .espot-title { font-size: 20px; margin-left: 0; } .espot-list-container { overflow: visible; } .espot-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; list-style: none; margin: 0; padding: 0; width: 100%; overflow: visible; } .espot-item { width: 100%; position: relative; height: auto; min-height: 100px; overflow: hidden; border-radius: 9px; border: 1px solid #0d5c91; background: transparent; } .espot-item img { display: block; } .espot-text { font-size: 21px; color: #fff; } }