/* CUSTOM STYLES */

#image-carusel {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    position: relative;
    top: -2.5em;
}

#carousel-bullets {
    position: relative;
    height: 0px !important;
    top: -5em;
}

.container {
    padding: 75px 0em !important;
    height: fit-content;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.carusel-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* kluczowe */
    border-radius: 1em; /* opcjonalnie */
}

.content {
    display: flex;

    min-width: 1000px;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;

    gap: 20px;
    padding: 1em;
    border-radius: 1em;
}

/* CUSTOM STYLES */

/* GLIDE ELEMENTS */

.glide__bullets {
    background-color: color-mix(in hsl, var(--accent) 60%, transparent);
    border-radius: 1em;
    padding: .5em;
    position: relative !important;
    top: -10em;
}

.glide__arrow {

    border-radius: .75em !important;
    font-size: 1.25rem;
    border-color: color-mix(in hsl, var(--button-primary) 80%, black 20%) !important;
    background-color: color-mix(in hsl, var(--button-primary) 40%, transparent) !important;
}

.glide__arrow:hover {
    cursor: pointer;
    opacity: .8;
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: .7;
}

.glide,
.glide__track,
.glide__slides,
.glide__slide {
    overflow: visible !important;
    height: 100%;
}


.glide__slide {
    height: fit-content;
    filter: blur(2px);
    opacity: .5;
    align-items: center;
    justify-content: center;
    
    padding: 0px;
    transition: opacity .2s ease-in-out, filter .5s ease-in-out, transform .5s ease-in-out;
}

.glide__slide--active {
    transform: scale(1.05);
    filter: none;
    opacity: 1;
    z-index: 9999;
}

/* GLIDE ELEMENTS */

@media (max-width: 640px) {
    .glide__slide {
        max-width: 100vw;
        height: auto;
        filter: blur(none) !important;
        transform: scale(1) !important;
        opacity: 1;

        transition: opacity 0s ease-in-out, filter 0s ease-in-out, transform 0s ease-in-out;
    }

    .content {
        margin: 0px !important;
        min-width: auto;
        padding: 0px;
    }

    .carusel-img, .content {
        height: auto;
        max-width: 100vw;
    }
}