.embla {
    position: relative;
}

.embla[data-embla-mode="slide"],
.embla[data-embla-mode="fade"] {
    --embla-item-count: var(--all-embla-item-count);
    --embla-gap-size: var(--all-embla-gap-size);

    @media (max-width: 1280px) {
        --embla-item-count: var(--lg-embla-item-count);
        --embla-gap-size: var(--lg-embla-gap-size);
    }

    @media (max-width: 960px) {
        --embla-item-count: var(--md-embla-item-count);
        --embla-gap-size: var(--md-embla-gap-size);
    }

    @media (max-width: 640px) {
        --embla-item-count: var(--sm-embla-item-count);
        --embla-gap-size: var(--sm-embla-gap-size);
    }

    --embla-gap-count: calc(var(--embla-item-count) - 1);
    --embla-gap-reduction: calc(var(--embla-gap-size) * var(--embla-gap-count) / var(--embla-item-count));
    --embla-item-size: calc(100% / var(--embla-item-count));
    --embla-flex-value: calc(var(--embla-item-size) - var(--embla-gap-reduction));
}

.embla[data-embla-mode="fade"] {
    --embla-item-count: 1;
    --embla-gap-size: 0px;
}

.embla__viewport {
    overflow: hidden;
    position: relative;
}

.embla__container {
    display: flex;
    padding: 0;
    list-style: none;
}

.embla__slide {
    flex: 0 0 var(--embla-flex-value);
    min-width: 0;
    padding: 0;
}

.embla.auto-width .embla__slide {
    flex: 0 0 auto;
}

[data-embla-align="start"] .embla__slide,
[data-embla-align="center"] .embla__slide {
    margin-right: var(--embla-gap-size);
}

[data-embla-align="start"]:not([data-embla-loop="true"]) .embla__slide:last-child,
[data-embla-align="center"]:not([data-embla-loop="true"]) .embla__slide:last-child {
    margin-right: 0;
}

[data-embla-align="end"] .embla__slide {
    margin-left: var(--embla-gap-size);
}

[data-embla-align="end"]:not([data-embla-loop="true"]) .embla__slide:first-child {
    margin-left: 0;
}

.embla__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-default);
    margin-top: var(--spacing-small);
    pointer-events: none;
}

.embla__button {
    width: 4rem;
    height: 2rem;
    background: transparent;
    border-radius: 1.25rem;
    padding: .25rem .5rem;
    transition-duration: var(--transition-duration);
    pointer-events: auto;
    border: 1px solid var(--light);
}

.embla__button:hover {
    background: var(--button-background-color-hover);
    border-color: var(--button-background-color-hover);
}

.embla__button[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.embla__button--prev svg {
    transform: translateX(-0.1rem);
}

.embla__button--next svg {
    transform: translateX(0.1rem);
}

.embla__button path {
    stroke: var(--black);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition-duration: var(--transition-duration);
}

.embla__button:hover path {
    stroke: var(--white);
}

.embla__dots {
    display: flex;
    border-radius: 1rem;
    overflow: hidden;
}

.embla__dot {
    width: 2rem;
    height: .75rem;
    background: var(--black-alpha-1);
    transition-duration: var(--transition-duration);
    pointer-events: auto;
}

.embla__dot.embla__dot--selected {
    background: var(--button-background-color);
}

.embla__dot:hover {
    background: var(--button-background-color-hover);
}

.embla__counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1ch;
    width: 7ch;
    color: var(--dark);
    opacity: .7;
    font-size: .8rem;
}

.embla__counter .counter-separator {
    position: relative;
}

.embla__counter .counter-separator {
    width: 1px;
    height: 1rem;
    background: var(--dark);
    rotate: 15deg;
}

.embla-thumbs {
    position: relative;
    margin-top: var(--spacing-small);
}

.embla-thumbs__viewport {
    overflow: hidden;
    position: relative;
}

.embla-thumbs__container {
    display: flex;
    justify-content: start;
    gap: var(--spacing-tiny);
}

.embla-thumbs__slide {
    width: 6rem;
    flex-shrink: 0;
    cursor: pointer;
    opacity: .5;
    transition-duration: var(--transition-duration);
}

.embla-thumbs__slide:hover,
.embla-thumbs__slide--selected {
    opacity: 1;
}

/* Custom CSS */
.embla__slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 6 / 3.3;
    overflow: hidden;
    position: relative;
}

@media (max-width: 640px) {
    .embla__slide {
        aspect-ratio: 1 / 1;
    }
}

.embla__slide > img:first-of-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

@media (width >= 1020px) {
    .embla__slide > img {
        transition-duration: .6s;
    }

    .embla__slide:hover > img {
        scale: 1.02;
    }
}

.embla__slide .content .content {
    z-index: 2;
}

.embla__slide .content .heading {
    margin-top: 0;
    margin-bottom: .5rem;
}

.embla__slide .content .overlay-link:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.embla__slide .content .description {
    max-width: 32rem;
}

@media (max-width: 740px) {
    .embla__slide .content .description {
        font-size: .8rem;
    }
}

.embla__slide .content .arrow-wrapper {
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.embla__slide .content .arrow-wrapper svg,
.embla__slide .content .arrow-wrapper img {
    width: 2rem;
}

.embla__slide .content .arrow-wrapper svg path {
    fill: var(--color-1);
}

.projekt-carousel .embla__slide {
    padding: var(--spacing-default);
    padding-top: var(--spacing-default);
    position: relative;
}

.projekt-carousel .content {
    z-index: 2;
}

.embla__slide .content .overlay-link:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    z-index: 0;
}

.projekt-carousel .arrow-wrapper {
    position: absolute;
    right: var(--spacing-default);
    bottom: var(--spacing-default);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background: var(--light);
    padding: .5rem 1rem;
    border-radius: 10rem;
    cursor: pointer;
    transition-duration: var(--transition-duration);
}

.projekt-carousel .arrow-wrapper:hover {
    transform: scale(1.1);
}

.projekt-carousel .arrow-wrapper svg,
.projekt-carousel .arrow-wrapper img {
    width: 2.5rem;
    transition-duration: var(--transition-duration);
}

.project-favicon {
    position: absolute;
    top: var(--spacing-default);
    right: var(--spacing-default);
    z-index: 100;
    display: flex;
}

@media (max-width: 640px) {
    .project-favicon {
        position: absolute;
        top: unset;
        right: unset;
        left: var(--spacing-default);
        bottom: var(--spacing-default);
        z-index: 100;
        display: flex;
    }
}

.project-favicon svg {
    width: 1.5rem;
    height: auto;
}

.project-favicon svg path {
    fill: var(--light);
}