/* Carousel */

svg.carousel-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.block-carousel {
    position: relative;
	overflow: hidden;
}

.block-carousel-inner {
    position: relative;
    z-index: 1;
    padding: 6rem 0;
}


.slide-content {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.slide-content a {
    color: inherit;
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
}


/* CSS implementation */
.splide__slide figure.slide-image {
    clip-path: none;
    transition: clip-path 0.4s ease-in-out;
    width: 100%;
    height: 100%;
	background-color: #000;
}

.splide__slide:hover {
    transform: scale(0.96) rotate(2deg);
}

.splide__slide:nth-of-type(odd):hover figure.slide-image {
    clip-path: url(#mask1);
}

.splide__slide:nth-of-type(even):hover figure.slide-image {
    clip-path: url(#mask2);
}


.block-carousel-inner h2 {
    margin-top: 0;
}


.slide-image {
    position: relative;
    height: 0;
    padding-bottom: 140%;
    overflow: hidden;
    width: 100%;
}

.slide-image  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	opacity: .8;
}




/* Splide */

.splide {
    margin-bottom: 4rem;
	margin-top: 6rem;
}
.splide__arrows.splide__arrows--ltr {
    position: absolute;
    width: 15rem;
    right: 0;
    bottom: 0;
}
.splide__arrow {
    background: #fff;
	width: 4rem;
    height: 4rem;
	color: inherit;
	opacity: 1;
}
.splide__arrow svg {
    fill: currentcolor;
	width: 4rem;
    height: 100%;
    width: 100%;
}
.my-slider-progress {
    width: calc(33.33% - 3rem);
}
.splide__track {
    overflow: visible;
	margin-bottom: 8rem;
}
.my-slider-progress {
    background: rgb(0 0 0 / 10%);
}
.my-slider-progress-bar {
	height: 2px;
	transition: width 400ms ease;
	width: 0;
    background: currentColor;
}

.splide:not(.is-overflow) .splide__arrows, .splide:not(.is-overflow) .my-slider-progress {
    display: none;
}
.splide__arrow--prev {
    left: 2.5em;
}



/* Desktop small */
@media only screen and (max-width: 1100px) {
  
}

@media only screen and (max-width: 900px) {
  
}



/* Tablet */
@media only screen and (max-width: 700px) {
  

}


/* Iphone */
@media only screen and (max-width: 450px) {
  
}