.carousel_container { @media screen and (min-width: $breakpoint_tablet) { width: 100%; overflow-x: hidden; } .slick-container { width: 100%; margin-bottom: 5rem; @media screen and (min-width: $breakpoint_tablet) { width: 200vw; transform: translateX(-50vw); } div.views-row { padding: 0 3vw; @media screen and (min-width: $breakpoint_tablet) { padding: 0 6vw; } > article { width: 100%; > div:first-of-type { // container du lien image overflow-y: hidden; padding: 0 !important; display: flex; align-items: center; > div { width: 100%; > a { max-width: 100%; img { width: 100%; height: auto; } } } } @media (min-width: $breakpoint_tablet) { .preview_meta { margin-left: 0; margin-right: 0; } h2, .preview_sous_titre { padding-left: 0; padding-right: 0; } } } } .slick-arrow { width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; background-color: $teal !important; transition: background-color 0.3s ease; top: unset !important; bottom: calc(-25px - 4rem); @media (min-width: $breakpoint_tablet) { width: 2rem; height: 2rem; bottom: calc(-25px - 6rem); } &:hover { background-color: white !important; &::before { color: $teal; } } &::before { opacity: 1 !important; color: white; font-weight: bold; font-family: 'Marianne', sans-serif; display: block; font-size: $sm_font_size !important; @media (min-width: $breakpoint_tablet) { font-size: $l_font_size !important; } } } .slick-prev { left: 20vw; @media (min-width: $breakpoint_tablet) { left: calc(50vw + 35vw); } } .slick-next { right: 20vw; @media (min-width: $breakpoint_tablet) { right: calc(50vw + 35vw); } } > div > div > div:first-of-type { z-index: 2; position: relative; margin-bottom: 4rem; @media (min-width: $breakpoint_tablet) { margin-bottom: 6rem; } } #carousel_dots { z-index: 1; position: relative; margin-top: -15px; ul { position: relative; bottom: 0; li.slick-active button::before{ color: $teal; } li button::before{ color: rgba(0.9, 0.9, 0.9, 1); } } } footer { @include fluo_button(); text-align: center; margin-top: 4rem; margin-bottom: 4rem; } } }