#homepage {
    margin: 0;
    height: 100svh;
    overflow-x: scroll;
    display: flex;
    align-items: center;
    scrollbar-width: none;
    scroll-snap-type: none;

    @media screen and (max-width: 1024px) {
        height: calc(100svh - 220px);
    }

    @media screen and (max-width: 768px) {
        height: calc(100svh - 140px);
    }

    &::-webkit-scrollbar {
        display: none;
    }
}


#carousel {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oxq-tag {
    background-color: rgb(var(--color-oxq-black-50));
    color: rgb(var(--color-oxq-black-400));
    transition: all 0.5s ease;

    @media screen and (max-height: 1000px) {
        font-size: 16px;
        line-height: 1.2;
    }
}

.first-slide {
    max-width: min(900px, 60vw);

    @media screen and (max-width: 1024px) {
        max-width: min(600px, 100vw);
    }

    &:not(:first-child) {
        margin-left: min(200px, 4vw);
    }
}

.slide:not(.ignore-css) {
    --slide-width: min(38vh, 30rem);

    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--slide-width);
    height: calc(var(--slide-width) * 1.6);
    transition: transform 1s cubic-bezier(.08, .84, .88, 1);
    max-width: 30rem;
    position: relative;

    @media screen and (min-width: 1025px) {
        &:nth-child(2n+1) {
            height: calc(var(--slide-width) * 1.6);
        }

        &:nth-child(2n+2) {
            height: calc(var(--slide-width) * 1.45);
        }
    }

    @media screen and (max-width: 768px) {
        --slide-width: min(38vh, 400px);
        max-height: 64svh;
    }

    .slide-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
        overflow: hidden;
        pointer-events: auto;
        transition: all 0.5s ease;

        .overlay-wrapper {
            opacity: 0;
            color: white;
            transition: all 0.5s ease;

            .overlay-backdrop {
                transition: opacity 0.5s ease;
            }

            &.hover {
                opacity: 1;
            }
        }

        .slide-tags-wrapper {
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s ease-in-out;

            &.active {
                grid-template-rows: 1fr;
            }
        }

        .slide-title {
            font-size: 36px;
            line-height: 1.3;
            @media screen and (max-height: 1400px) {
                font-size: 32px;
            }
            @media screen and (max-height: 1000px) {
                font-size: 24px;
            }

            &.bigger {
                font-size: 44px;
                line-height: 1.3;
                @media screen and (max-height: 1400px) {
                    font-size: 36px;
                }
                @media screen and (max-height: 1000px) {
                    font-size: 32px;
                }
            }
        }

        .close-slide {
            > .close-slide-wrapper {
                --size: 12px;
                --stroke: 2px;
                padding: calc(var(--size) / 3);
                border-radius: 9999px;
                rotate: 180deg;

                > .close-slide-inner {
                    height: var(--size);
                    width: var(--size);
                    transition: .3s all ease-in-out;

                    > .close-slide-element-1, .close-slide-element-2 {
                        position: absolute;
                        transform-origin: calc(var(--stroke) / 2) center;
                        top: calc(50% - var(--stroke) / 2);
                        left: calc(68% - var(--size) / 2);
                        height: var(--stroke);
                        width: calc((var(--size) / 3) * 2);
                        transform: translateX(0);
                        transition: .3s all ease-in-out;
                        background-color: rgb(var(--color-oxq-white));
                    }

                    > .close-slide-element-1 {
                        rotate: 45deg;
                    }

                    > .close-slide-element-2 {
                        rotate: -45deg;
                    }
                }

                @media screen and (min-width: 1440px) {
                    --size: 18px;
                --stroke: 3px;
                }
            }
        }

        .company_logo {
            transition: opacity 0.5s ease;
            opacity: 0;
            max-height: max(10vh, 48px);
        }

        .company_logo_inverted {
            transition: opacity 0.5s ease;
            opacity: 1;
            max-height: max(8vh, 48px);
        }

        .slide-inner__info-wrapper, .slide-image {
            width: var(--slide-width);

            @media screen and (max-width: 768px) {
                width: 100%;
            }
        }

        @media screen and (min-width: 1024px) {

            &:not(.first-slide) {
                &.active {
                    width: calc(var(--slide-width) * 2);
                    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
                    cursor: auto;

                    .close-slide {
                        > .close-slide-wrapper {
                            > .close-slide-inner {
                                transform: translateX(calc(var(--size) / 4.5));

                                > .close-slide-element-1, .close-slide-element-2 {
                                    transform: translateX(calc(-50% + (var(--stroke) / 2)));
                                    width: var(--size);
                                }
                            }
                        }
                    }

                    .company_logo {
                        opacity: 1;
                    }

                    .company_logo_inverted {
                        opacity: 0;
                    }

                    .overlay-wrapper {
                        opacity: 1;
                        color: black;
                    }

                    .overlay-backdrop {
                        opacity: 0;
                    }
                }
            }
        }
    }
}

.swiper-wrapper {
    transition-timing-function: linear;
}

#homepage .swiper-pagination {
    padding: 4px;
    bottom: 0;

    .swiper-pagination-bullet {
        position: relative;
        width: 14px;
        height: 14px;
        margin: 0 7px;
        background-color: transparent;
        box-shadow: inset 0 0 0 2px rgb(var(--color-oxq-black));

        @media screen and (max-width: 1024px) {
            width: 10px;
            height: 10px;
            margin: 0 5px;
        }

        &:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--color-oxq-black), 1);
            border-radius: 50%;
            animation-duration: 1s;
            animation-name: switch-out;
            animation-fill-mode: forwards;
            left: 0
        }

        &.swiper-pagination-bullet-active::before {
            animation-name: switch-in;
        }
    }
}