/* height */

.height-0px {
    height: 0;
}

.height-4px {
    height: 4px;
}

.height-8px {
    height: 8px;
}

.height-12px {
    height: 12px;
}

.height-16px {
    height: 16px;
}

.height-24px {
    height: 24px;
}

.height-32px {
    height: 32px;
}

.height-40px {
    height: 40px;
}

.height-48px {
    height: 48px;
}

.height-56px {
    height: 56px;
}

.height-64px {
    height: 64px;
}

.height-72px {
    height: 72px;
}

.height-80px {
    height: 80px;
}

.height-88px {
    height: 88px;
}

.height-96px {
    height: 96px;
}

.height-128px {
    height: 128px;
}

.height-256px {
    height: 256px;
}

.height-full {
    height: 100%;
}

.height-100vh {
    height: 100vh;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-x-visible {
    overflow-x: visible;
}

.overflow-x-auto {
    overflow-x: auto;
}

/* List style */
.list-disc {
    list-style-type: disc;
}

.list-decimal {
    list-style-type: decimal;
}

.list-none {
    list-style-type: none;
}

/* Text wrap */

.textWrap-wrap {
    text-wrap: wrap;
}

.textWrap-nowrap {
    text-wrap: nowrap;
}

.textWrap-balance {
    text-wrap: balance;
}

.textWrap-pretty {
    text-wrap: pretty;
}

.textWrap-stable {
    text-wrap: stable;
}

.textWrap-unset {
    text-wrap: unset;
}

/* Gap */

.gap-0px {
    gap: 0px;
}

.gap-4px {
    gap: 4px;
}

.gap-8px {
    gap: 8px;
}

.gap-12px {
    gap: 12px;
}

.gap-16px {
    gap: 16px;
}

.gap-24px {
    gap: 24px;
}

.gap-32px {
    gap: 32px;
}

.gap-40px {
    gap: 40px;
}

.gap-48px {
    gap: 48px;
}

.gap-56px {
    gap: 56px;
}

.gap-64px {
    gap: 64px;
}

.gap-72px {
    gap: 72px;
}

/* Grid block */

.df-grid > .lazyblock-inner-blocks {
    display: grid;
}

.df-grid.cols-1 > .lazyblock-inner-blocks {
    grid-template-columns: 1fr;
}

.df-grid.cols-2 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(2, 1fr);
}

.df-grid.cols-3 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(3, 1fr);
}

.df-grid.cols-4 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(4, 1fr);
}

.df-grid.cols-5 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(5, 1fr);
}

.df-grid.cols-6 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(6, 1fr);
}

.df-grid.cols-7 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(7, 1fr);
}

.df-grid.cols-8 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(8, 1fr);
}

.df-grid.cols-9 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(9, 1fr);
}

.df-grid.cols-10 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(10, 1fr);
}

.df-grid.cols-11 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(11, 1fr);
}

.df-grid.cols-12 > .lazyblock-inner-blocks {
    grid-template-columns: repeat(12, 1fr);
}

.df-grid.gap-0px > .lazyblock-inner-blocks {
    gap: 0px;
}

.df-grid.gap-4px > .lazyblock-inner-blocks {
    gap: 4px;
}

.df-grid.gap-8px > .lazyblock-inner-blocks {
    gap: 8px;
}

.df-grid.gap-12px > .lazyblock-inner-blocks {
    gap: 12px;
}

.df-grid.gap-16px > .lazyblock-inner-blocks {
    gap: 16px;
}

.df-grid.gap-24px > .lazyblock-inner-blocks {
    gap: 24px;
}

.df-grid.gap-32px > .lazyblock-inner-blocks {
    gap: 32px;
}

.df-grid.gap-40px > .lazyblock-inner-blocks {
    gap: 40px;
}

.df-grid.gap-48px > .lazyblock-inner-blocks {
    gap: 48px;
}

.df-grid.gap-56px > .lazyblock-inner-blocks {
    gap: 56px;
}

.df-grid.gap-64px > .lazyblock-inner-blocks {
    gap: 64px;
}

.df-grid.gap-72px > .lazyblock-inner-blocks {
    gap: 72px;
}

@media screen and (min-width: 768px) {
    .df-grid.md_cols-1 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(1, 1fr);
    }

    .df-grid.md_cols-2 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(2, 1fr);
    }

    .df-grid.md_cols-3 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(3, 1fr);
    }

    .df-grid.md_cols-4 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(4, 1fr);
    }

    .df-grid.md_cols-5 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(5, 1fr);
    }

    .df-grid.md_cols-6 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(6, 1fr);
    }

    .df-grid.md_cols-7 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(7, 1fr);
    }

    .df-grid.md_cols-8 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(8, 1fr);
    }

    .df-grid.md_cols-9 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(9, 1fr);
    }

    .df-grid.md_cols-10 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(10, 1fr);
    }

    .df-grid.md_cols-11 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(11, 1fr);
    }

    .df-grid.md_cols-12 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .df-grid.lg_cols-1 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(1, 1fr);
    }

    .df-grid.lg_cols-2 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(2, 1fr);
    }

    .df-grid.lg_cols-3 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(3, 1fr);
    }
    .df-grid.lg_cols-4 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(4, 1fr);
    }

    .df-grid.lg_cols-5 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(5, 1fr);
    }

    .df-grid.lg_cols-6 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(6, 1fr);
    }

    .df-grid.lg_cols-7 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(7, 1fr);
    }

    .df-grid.lg_cols-8 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(8, 1fr);
    }

    .df-grid.lg_cols-9 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(9, 1fr);
    }

    .df-grid.lg_cols-10 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(10, 1fr);
    }

    .df-grid.lg_cols-11 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(11, 1fr);
    }

    .df-grid.lg_cols-12 > .lazyblock-inner-blocks {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Image block */

.df-image > img {
    display: block;
    width: 100%;
}

/* Card block */

.df-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    padding: 16px;
}

/* Chip block */

.df-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 16px;
    border: 1px solid currentColor;
}

/* Carousel block */

.df-carousel .embla {
    background-color: blue;
}

.df-carousel .slot-controller {
    background-color: red;
}

.carousel-gap-0px .embla__container > .lazyblock-inner-blocks {
    gap: 0px;
}
.carousel-gap-4px .embla__container > .lazyblock-inner-blocks {
    gap: 4px;
}
.carousel-gap-8px .embla__container > .lazyblock-inner-blocks {
    gap: 8px;
}
.carousel-gap-12px .embla__container > .lazyblock-inner-blocks {
    gap: 12px;
}
.carousel-gap-16px .embla__container > .lazyblock-inner-blocks {
    gap: 16px;
}
.carousel-gap-24px .embla__container > .lazyblock-inner-blocks {
    gap: 24px;
}
.carousel-gap-32px .embla__container > .lazyblock-inner-blocks {
    gap: 32px;
}
.carousel-gap-40px .embla__container > .lazyblock-inner-blocks {
    gap: 40px;
}
.carousel-gap-48px .embla__container > .lazyblock-inner-blocks {
    gap: 48px;
}

.df-carousel.carousel-overflow-visible .embla__viewport,
.df-carousel.carousel-overflow-visible .embla__container {
    overflow: visible;
}

.df-carousel.carousel-overflow-hidden .embla__viewport,
.df-carousel.carousel-overflow-hidden .embla__container {
    overflow: hidden;
}

.df-carousel .embla__container,
.df-carousel .embla__container > .lazyblock-inner-blocks {
    height: 100%;
}

.df-carousel.slides-1 .embla__container {
    width: 100%;
}

.df-carousel .embla__container > .lazyblock-inner-blocks {
    display: flex;
}

.df-carousel .df-carousel-item,
.df-carousel .df-carousel-item > .lazyblock-inner-blocks {
    height: 100%;
}

.df-carousel.slides-1_5 .df-carousel-item {
    flex: 0 0 calc(100% / 1.5);
}

.df-carousel.slides-2 .df-carousel-item {
    flex: 0 0 calc(100% / 2);
}

.df-carousel.slides-2_5 .df-carousel-item {
    flex: 0 0 calc(100% / 2.5);
}

.df-carousel.slides-3 .df-carousel-item {
    flex: 0 0 calc(100% / 3);
}

@media screen and (min-width: 768px) {
    .df-carousel.md_carousel-overflow-visible .embla__viewport,
    .df-carousel.md_carousel-overflow-visible .embla__container {
        overflow: visible;
    }
    
    .df-carousel.md_carousel-overflow-hidden .embla__viewport,
    .df-carousel.md_carousel-overflow-hidden .embla__container {
        overflow: hidden;
    }

    .df-carousel.md_slides-1_5 .df-carousel-item {
        flex: 0 0 calc(100% / 1.5);
    }

    .df-carousel.md_slides-2 .df-carousel-item {
        flex: 0 0 calc(100% / 2);
    }

    .df-carousel.md_slides-2_5 .df-carousel-item {
        flex: 0 0 calc(100% / 2.5);
    }

    .df-carousel.md_slides-3 .df-carousel-item {
        flex: 0 0 calc(100% / 3);
    }

    .df-carousel.md_slides-3_5 .df-carousel-item {
        flex: 0 0 calc(100% / 3.5);
    }

    .df-carousel.md_slides-4 .df-carousel-item {
        flex: 0 0 calc(100% / 4);
    }

    .df-carousel.md_slides-4_5 .df-carousel-item {
        flex: 0 0 calc(100% / 4.5);
    }

    .df-carousel.md_slides-5 .df-carousel-item {
        flex: 0 0 calc(100% / 5);
    }

    .df-carousel.md_slides-5_5 .df-carousel-item {
        flex: 0 0 calc(100% / 5.5);
    }

    .df-carousel.md_slides-6 .df-carousel-item {
        flex: 0 0 calc(100% / 6);
    }
}

@media screen and (min-width: 1200px) {
    .df-carousel.lg_carousel-overflow-visible .embla__viewport,
    .df-carousel.lg_carousel-overflow-visible .embla__container {
        overflow: visible;
    }
    
    .df-carousel.lg_carousel-overflow-hidden .embla__viewport,
    .df-carousel.lg_carousel-overflow-hidden .embla__container {
        overflow: hidden;
    }

    .df-carousel.lg_slides-1_5 .df-carousel-item {
        flex: 0 0 calc(100% / 1.5);
    }

    .df-carousel.lg_slides-2 .df-carousel-item {
        flex: 0 0 calc(100% / 2);
    }

    .df-carousel.lg_slides-2_5 .df-carousel-item {
        flex: 0 0 calc(100% / 2.5);
    }

    .df-carousel.lg_slides-3 .df-carousel-item {
        flex: 0 0 calc(100% / 3);
    }

    .df-carousel.lg_slides-3_5 .df-carousel-item {
        flex: 0 0 calc(100% / 3.5);
    }

    .df-carousel.lg_slides-4 .df-carousel-item {
        flex: 0 0 calc(100% / 4);
    }

    .df-carousel.lg_slides-4_5 .df-carousel-item {
        flex: 0 0 calc(100% / 4.5);
    }

    .df-carousel.lg_slides-5 .df-carousel-item {
        flex: 0 0 calc(100% / 5);
    }

    .df-carousel.lg_slides-5_5 .df-carousel-item {
        flex: 0 0 calc(100% / 5.5);
    }

    .df-carousel.lg_slides-6 .df-carousel-item {
        flex: 0 0 calc(100% / 6);
    }

    .df-carousel.lg_slides-6_5 .df-carousel-item {
        flex: 0 0 calc(100% / 6.5);
    }

    .df-carousel.lg_slides-7 .df-carousel-item {
        flex: 0 0 calc(100% / 7);
    }

    .df-carousel.lg_slides-7_5 .df-carousel-item {
        flex: 0 0 calc(100% / 7.5);
    }

    .df-carousel.lg_slides-8 .df-carousel-item {
        flex: 0 0 calc(100% / 8);
    }
}

/*typography*/

.text-display-l {
    font-size: clamp(45px, 3.8vw, 73px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(52px, 4.6vw, 88px) !important;
    letter-spacing: -0.25px !important;
}

.text-display-m {
    font-size: clamp(36px, 3vw, 58px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(48px, 3.3vw, 64px) !important;
    letter-spacing: 0 !important;
}

.text-display-s {
    font-size: clamp(28px, 2.3vw, 45px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(32px, 2.9vw, 56px) !important;
    letter-spacing: 0 !important;
}

.text-headline-l {
    font-size: clamp(25px, 1.7vw, 32px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(32px, 2.1vw, 40px) !important;
    letter-spacing: 0 !important;
}

.text-headline-m {
    font-size: clamp(22px, 1.5vw, 28px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(28px, 1.9vw, 36px) !important;
    letter-spacing: 0 !important;
}

.text-headline-s {
    font-size: clamp(18px, 1.2vw, 24px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(24px, 1.6vw, 32px) !important;
    letter-spacing: 0 !important;
}

.text-title-l {
    font-size: clamp(20px, 1.1vw, 22px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(24px, 1.5vw, 28px) !important;
    letter-spacing: 0 !important;
}

.text-title-m {
    font-size: clamp(18px, 1vw, 20px) !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.15px !important;
}

.text-title-s {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: clamp(20px, 1.3vw, 24px) !important;
    letter-spacing: 0.1px !important;
}

.text-body-l {
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.5px !important;
}

.text-body-m {
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0.25px !important;
}

.text-body-s {
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.4px !important;
}

.text-label-l {
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0.1px !important;
}

.text-label-m {
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.5px !important;
}

.text-label-s {
    font-size: 11px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.5px !important;
}