.carousel {display: block;position: relative;width: 100%;height: 100%; } .carousel .holder {height: 100%;overflow: hidden; } .carousel .holder .row {flex-wrap: nowrap;position: relative;height: 100%; } .carousel .holder .col {flex-shrink: 0;height: 100%; } .carousel .holder .item {position: relative;border: 0;width: 100%;height: 100%; } .carousel .holder .slide {height: 100%; } .carousel .holder .img-fluid {width: 100%;height: 100%;object-fit: cover; } .carousel .btn-prev, .carousel .btn-next {display: none;flex-direction: column;align-items: center;justify-content: center;position: absolute;top: 50%;transform: translateY(-50%);padding: 0.1875rem;line-height: 1;box-shadow: none;text-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);background: transparent;color: var(--white);z-index: 15;width: 4rem;height: 4rem;transition: background 0.05s ease-in-out, color 0.05s ease-in-out, box-shadow 0.05s ease-in-out; } @media (min-width: 576px) {.carousel .btn-prev, .carousel .btn-next {display: flex;} } @media (max-width: 480px) and (max-height: 750px) {.carousel .btn-prev, .carousel .btn-next {display: none;} } .carousel .btn-prev svg, .carousel .btn-next svg {line-height: 0;padding: 0;width: 3.5rem;height: auto; } .carousel .btn-prev.btn-prev, .carousel .btn-next.btn-prev {left: 0.625rem; } .carousel .btn-prev.btn-next, .carousel .btn-next.btn-next {right: 0.625rem; } .carousel .btn-prev[disabled], .carousel .btn-next[disabled] {color: var(--dark); } .carousel .btn-prev:hover:not([disabled]), .carousel .btn-next:hover:not([disabled]) {color: var(--link-hover-color); }