:root {
    --mtc-slide-height: 600px;
    --mtc-slide-height-mobile: 1620px;
    --mtc-slide-transition-duration: 0.45s;
    --mtc-slide-transition-easing: ease;
    --mtc-slide-nav-size: 44px;
    --mtc-slide-nav-offset: 20px;
    --mtc-slide-dot-size: 9px;
    --mtc-slide-dot-gap: 8px;
    --mtc-slide-dot-bottom: 18px;
}

/**
 * Generic slide component
 *
 * Compatible con:
 * - .mtc-slide
 * - .mtc-super-hero
 */
.mtc-slide,
.mtc-super-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/**
 * Track / slides wrapper
 */
.mtc-slide__track,
.mtc-super-hero__slides {
    position: relative;
    width: 100%;
    height: var(--mtc-slide-height);
    max-height: var(--mtc-slide-height);
}

/**
 * Slide item
 */
.mtc-slide__item,
.mtc-super-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mtc-slide-transition-duration) var(--mtc-slide-transition-easing);
}

.mtc-slide__item.is-active,
.mtc-super-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/**
 * Clickable full slide link
 */
.mtc-slide__link,
.mtc-super-hero__link {
    display: block;
    width: 100%;
    height: 100%;
}

/**
 * Media
 */
.mtc-slide__media,
.mtc-super-hero__image {
    display: block;
    width: 100%;
    height: var(--mtc-slide-height);
    max-height: var(--mtc-slide-height);
    object-fit: cover;
}

/**
 * Navigation arrows
 */
.mtc-slide__nav,
.mtc-super-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 30;
    width: var(--mtc-slide-nav-size);
    height: var(--mtc-slide-nav-size);
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    transform: translateY(-50%);
}

.mtc-slide__nav--prev,
.mtc-super-hero__nav--prev {
    left: var(--mtc-slide-nav-offset);
}

.mtc-slide__nav--next,
.mtc-super-hero__nav--next {
    right: var(--mtc-slide-nav-offset);
}

/**
 * Dots
 */
.mtc-slide__dots,
.mtc-super-hero__dots {
    position: absolute;
    left: 50%;
    bottom: var(--mtc-slide-dot-bottom);
    z-index: 30;
    display: flex;
    gap: var(--mtc-slide-dot-gap);
    transform: translateX(-50%);
}

.mtc-slide__dot,
.mtc-super-hero__dot {
    width: var(--mtc-slide-dot-size);
    height: var(--mtc-slide-dot-size);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.mtc-slide__dot.is-active,
.mtc-super-hero__dot.is-active {
    background: #fff;
}

@media (max-width: 768px) {
    .mtc-slide__track,
    .mtc-super-hero__slides,
    .mtc-slide__media,
    .mtc-super-hero__image {
        height: var(--mtc-slide-height-mobile);
        max-height: var(--mtc-slide-height-mobile);
    }
}