1.carrousel-cs { 2 padding: 0; 3} 4 5@media (min-width: 576px) { 6 .carrousel-cs { 7 padding: 1rem; 8 } 9} 10 11 12.glide__arrow--left{ 13 left:-1rem; 14} 15.glide__arrow--right{ 16 right:-1rem; 17} 18 19.glide__arrow { 20 position: absolute; 21 display: block; 22 top: 50%; 23 z-index: 2; 24 color: white; 25 text-transform: uppercase; 26 padding: 9px 12px; 27 background-color: transparent; 28 border: none; 29 text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); 30 opacity: 1; 31 cursor: pointer; 32 transition: opacity 150ms ease, border 300ms ease-in-out; 33 line-height: 1; 34} 35 36@media (min-width: 576px) { 37 .glide__arrow { 38 border: 2px solid rgba(255, 255, 255, 0.5); 39 box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); 40 border-radius: 4px; 41 } 42} 43 44 45.glide__arrow:focus { 46 outline: none; 47} 48.glide__arrow:hover { 49 border-color: white; 50} 51.glide__bullets { 52 list-style: none; 53 position: absolute; 54 z-index: 2; 55 bottom: 0; 56 left: 50%; 57 transform: translate(-50%, 0); 58} 59.glide__bullet { 60 background-color: rgba(0, 0, 0, 0.3); 61 width: 9px; 62 height: 9px; 63 padding: 0; 64 border-radius: 50%; 65 border: 2px solid transparent; 66 transition: all 300ms ease-in-out; 67 cursor: pointer; 68 line-height: 0; 69 box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1); 70 margin: 0 0.25em; 71 vertical-align: sub; 72} 73.glide__bullet--active { 74 background-color: black; 75} 76.glide__bullet:hover { 77 background-color: rgba(0, 0, 0, 0.3); 78} 79