.slick-container { @include beige_gradient(); width: 100vw; border-bottom: solid 2px $teal; div.views-row article { width: 100%; > div:first-of-type { // container du lien image width: 100%; height: 30vh !important; 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_desktop) { height: 50vh !important; } } @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 { display: none !important; width: 2rem; height: 2rem; border-radius: 1.5rem; border: solid 1px $teal; top: unset; bottom: 5%; background-color: rgba(255, 255, 255, 0.4) !important; transition: background-color 0.3s ease; @media (min-width: $breakpoint_desktop) { transform: translateY(-5rem); } } .slick-arrow:hover { background-color: rgba(255, 255, 255, 0.8) !important; } .slick-arrow::before { color: $teal; font-family: 'Marianne', sans-serif; display: block; padding-bottom: 3px; } #carousel_dots { position: relative; margin-top: -15px; ul { position: relative; bottom: 0; li.slick-active button::before{ color: $fluo_green; } li button::before{ color: rgba(0.9, 0.9, 0.9, 1); } } @media (min-width: $breakpoint_desktop) { margin-top: 4vh; } } footer { @include fluo_button(); text-align: center; margin-top: 4rem; margin-bottom: 4rem; } @media (min-width: $breakpoint_tablet) { padding: 0 12.5vw; .slick-prev, .slick-next { display: block !important; } .slick-prev { left: -5rem; } .slick-next { right: -5rem; } } }