.carousel {
  position: relative;
  width: var(--carousel-width);
  height: auto;
  display: grid;
  place-items: center;
}
.carousel .carousel-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: var(--large);
}
.carousel .carousel-buttons .carousel-controls {
  width: calc(100% - var(--button-gutter));
  display: flex;
  gap: var(--button-gap);
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.carousel .carousel-buttons .carousel-controls button {
  background-color: transparent;
  border: none;
  width: var(--button-size);
  height: var(--button-size);
  cursor: pointer;
  pointer-events: all;
}
.carousel .carousel-buttons .carousel-controls button:disabled {
  cursor: default;
  opacity: 0.5;
}
.carousel .carousel-buttons .carousel-controls button img {
  width: 100%;
  height: auto;
  position: relative;
  left: 0px;
  transition: left 0.3s;
}
.carousel .carousel-buttons .carousel-controls button img.white {
  display: none;
}
.carousel .carousel-buttons .carousel-controls button.prev:hover img {
  left: -10px;
}
.carousel .carousel-buttons .carousel-controls button.next:hover img {
  left: 10px;
}
.carousel .carousel-buttons .carousel-controls .logo-colour,
.carousel .carousel-buttons .carousel-controls .logo-white {
  width: 35px;
  height: auto;
}
.carousel .carousel-buttons .carousel-controls .logo-white {
  display: none;
}
.carousel .carousel-container {
  width: var(--slide-container-width);
  height: auto;
  overflow: hidden;
  display: flex;
  gap: var(--slide-gap);
}
.carousel .carousel-container .slide {
  position: relative;
  min-width: var(--slide-width);
  height: var(--slide-height);
  max-height: 450px;
  translate: 0px 0px;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.5s ease-out, opacity 1s;
}
.carousel .carousel-container .slide.center {
  left: 50%;
  transform: translateX(-50%);
}
.carousel .carousel-container .slide .white {
  display: none;
}
.carousel .carousel-container.active .slide {
  opacity: 1;
  pointer-events: all;
}
.carousel .carousel-container.active .slide:nth-of-type(1) {
  transition-delay: 0s, 0s;
}
.carousel .carousel-container.active .slide:nth-of-type(2) {
  transition-delay: 0s, 0.33s;
}
.carousel .carousel-container.active .slide:nth-of-type(3) {
  transition-delay: 0s, 0.66s;
}
.carousel .carousel-container.active .slide:nth-of-type(4) {
  transition-delay: 0s, 1s;
}

.image {
  position: relative;
}
.image::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}
.image .heading1 {
  position: relative;
  z-index: 2;
}
.image .carousel {
  position: relative;
  z-index: 2;
}
.image .carousel .carousel-buttons .carousel-controls button .colour {
  display: none;
}
.image .carousel .carousel-buttons .carousel-controls button .white {
  display: block;
}
.image .carousel .carousel-buttons .carousel-controls .logo-colour {
  display: none;
}
.image .carousel .carousel-buttons .carousel-controls .logo-white {
  display: block;
}
.image .carousel .carousel-buttons .arrow-link {
  color: var(--white) !important;
}
.image .carousel .carousel-buttons .arrow-link svg {
  color: var(--white) !important;
  fill: var(--white) !important;
}
.image .carousel .carousel-container .slide .colour {
  display: none;
}
.image .carousel .carousel-container .slide .white {
  display: block;
}

.standard-carousel .carousel {
  --carousel-width: 100%;
  --slide-container-width: 100%;
  --slide-width: calc((100% - 100px) / 3);
  --slide-height: auto;
  --slide-gap: var(--medium);
  --button-size: 55px;
  --button-gap: 5px;
  --button-gutter: var(--medium);
}

@media (max-width: 1300px) {
  .standard-carousel .carousel {
    --slide-width: calc((100% - 100px) / 3);
  }
  .standard-carousel .carousel .slide .button {
    min-width: unset;
  }
}
@media (max-width: 950px) {
  .standard-carousel .carousel {
    --slide-width: calc((100% - var(--slide-gap)) / 2) !important;
  }
}
@media (max-width: 550px) {
  .standard-carousel .carousel {
    --slide-width: 100% !important;
  }
}
@media (max-width: 485px) {
  .content-section .carousel {
    --button-size: 35px;
  }
}/*# sourceMappingURL=carousel.css.map */