.a-center {
    text-align: center;
}

.a-right {
    text-align: right;
}

.br-desktop {
    display: block;
}

.br-mobile {
    display: none;
}

.pb-none {
    padding-bottom: 0 !important;
}

.pt-none {
    padding-top: 0 !important;
}

.mt-none {
    margin-top: 0 !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.pd-18 {
    padding: 18px;
}

.pd-20 {
    padding: 20px;
}

.pd-22 {
    padding: 22px;
}

.pd-24 {
    padding: 24px;
}

.pd-30 {
    padding: 30px;
}

.pd-40 {
    padding: 40px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pt-16 {
    padding-top: 16px;
}

.pt-20 {
    padding-top: 20px;
}

.mb-6 {
    margin-bottom: 6px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-50 {
    margin-bottom: 50px;
}

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

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

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

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

.gap-18 {
    grid-gap: 18px;
}

.gap-20 {
    grid-gap: 20px;
}

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

.gap-30 {
    grid-gap: 30px;
}

.gap-36 {
    grid-gap: 36px;
}

.gap-50 {
    grid-gap: 50px;
}

.gap-55 {
    grid-gap: 55px;
}

.gap-60 {
    grid-gap: 60px;
}

.gap-80 {
    grid-gap: 80px;
}

.gap-100 {
    grid-gap: 100px;
}

.width-full {
    width: 100%;
}

.height-full {
    height: 100%;
}

.hidden {
    overflow: hidden;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.b-0 {
    bottom: 0;
}

.z-index-100 {
    z-index: 100;
}

.line-clamp-3 {
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: 300px;
    height: 100%;
    word-break: break-word;
}

.line-clamp-4 {
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: 300px;
    height: 100%;
    word-break: break-word;
}

/* Border Radius */
.border-radius-18 {
    border-radius: 18px;
}

.border-radius-20 {
    border-radius: 20px;
}

.border-radius-28 {
    border-radius: 28px;
}

/* Headline */

.headline-lg {
    font-size: 56px;
    line-height: 130%;
}

.headline-md {
    font-size: 38px;
    line-height: 140%;
}

.headline-sm {
    font-size: 30px;
}

.headline-2xs {
    font-size: 22px;
}

.headline-xs {
    font-size: 20px;
}

.grid {
    display: grid !important;
}

.grid-4fr-8fr {
    grid-template-columns: 4fr 8fr;
}

.grid-4fr-7fr {
    grid-template-columns: 4fr 7fr;
}

.grid-4fr-6fr {
    grid-template-columns: 4fr 6fr;
}

.grid-4fr-2fr {
    grid-template-columns: 4fr 2fr;
}

.grid-5fr-6fr {
    grid-template-columns: 5fr 6fr;
}

.grid-3fr-4fr {
    grid-template-columns: 3fr 4fr;
}

.grid-3fr-6fr {
    grid-template-columns: 3fr 6fr;
}

.grid-3fr-7fr {
    grid-template-columns: 3fr 7fr;
}

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

/* Flex */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row
}

.justify-flex-end {
    justify-content: flex-end;
}

.justify-flex-start {
    justify-content: flex-start;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.align-items-flexstart {
    align-items: flex-start
}

.align-items-flexend {
    align-items: flex-end;
}

.align-content-spacebetween {
    align-content: space-between;
}

.text-center {
    text-align: center;
}



/* Color */
.color-primary {
    color: var(--ui-primary-color);
}

.color-brown {
    color: var(--ui-brown-color);
}

.color-white {
    color: #FFF !important;
}

.color-white-70 {
    color: rgba(255, 255, 255, 0.70);
}

.color-white-80 {
    color: rgba(255, 255, 255, 0.70);
}

.color-black-70 {
    color: rgba(0, 0, 0, 0.70) !important;
}

.color-black-80 {
    color: rgba(0, 0, 0, 0.80) !important;
}

.color-black {
    color: #000 !important;
}

/* Background */
.bg-color-primary {
    background: var(--ui-bg-primary-color);
}

.bg-color-white {
    background: #FFF;
}

.bg-color-gray {
    background: var(--ui-bg-gray-color);
}

.weight-400 {
    font-weight: 400;
}

.weight-500 {
    font-weight: 500;
}

.columns-two {
    grid-template-columns: 1fr 1fr;
}

.columns-three {
    grid-template-columns: 1fr 1fr 1fr;
}

.columns-three-half {
    grid-template-columns: 1fr 1fr .6fr;
}

.columns-four {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.column-span-2 {
    grid-column: span 2;
}


@media (max-width: 1024px) {

    .xl-columns-one {
        grid-template-columns: 1fr !important;
    }

    .xl-columns-two {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .xl-columns-three {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .xl-gap-20 {
        gap: 20px;
    }

    .xl-headline-lg {
        font-size: 50px;
    }

    .br-ipad-none {
        display: none;
    }
}

@media (max-width: 991.98px) {

    .md-max-width-full {
        max-width: 100%;
    }

    .md-gap-20 {
        gap: 20px;
    }

    .md-gap-30 {
        gap: 30px;
    }

    .md-columns-three {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .md-columns-two {
        grid-template-columns: 1fr 1fr !important;
    }

    .md-columns-one {
        grid-template-columns: 1fr !important;
    }

    .md-headline-md {
        font-size: 32px;
        line-height: 150%;
    }

    .md-headline-lg {
        font-size: 36px;
    }

    .md-flex-column {
        flex-direction: column;
    }

    .md-align-items-flexstart {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {

    .m-text-center {
        text-align: center;
    }

    .m-text-left {
        text-align: left;
    }

    .m-headline-md {
        font-size: 30px;
        line-height: 150%;
    }

    .m-headline-md2x {
        font-size: 32px;
    }

    .m-headline-2xs {
        font-size: 20px !important;
    }

    .m-headline-lg {
        font-size: 32px;
    }

    .m-fontsize-12 {
        font-size: 12px !important;
    }

    .m-fontsize-14 {
        font-size: 14px !important;
    }

    .m-fontsize-16 {
        font-size: 16px !important;
    }

    .m-grid-block-1fr,
    .m-grid-1fr {
        grid-template-columns: 1fr;
    }

    .m-align-items-flexend {
        align-items: flex-end;
    }

    .m-flex-column {
        flex-direction: column;
    }

    .m-justify-flex-start {
        justify-content: flex-start;
    }

    .m-align-items-flexstart {
        align-items: flex-start;
    }

    .m-pb-none {
        padding-bottom: 0 !important;
    }

    .m-gap-6 {
        gap: 6px;
    }

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

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

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

    .m-gap-20 {
        gap: 20px;
    }

    .m-gap-30 {
        gap: 30px;
    }

    .m-gap-row-30 {
        grid-row-gap: 30px;
    }

    .m-gap-row-40 {
        grid-row-gap: 40px;
    }

    .m-gap-row-50 {
        grid-row-gap: 50px;
    }

    .m-mb-none {
        margin-bottom: 0;
    }

    .m-pd-14 {
        padding: 14px;
    }

    .m-pd-24 {
        padding: 24px;
    }

    .m-pd-20 {
        padding: 20px;
    }

    .m-pd-30 {
        padding: 30px;
    }

    .m-border-radius-8 {
        border-radius: 8px;
    }

    .m-border-radius-10 {
        border-radius: 10px;
    }

    .m-border-radius-12 {
        border-radius: 12px;
    }

    .m-border-radius-13 {
        border-radius: 13px;
    }

    .m-border-radius-14 {
        border-radius: 14px;
    }

    .m-border-radius-18 {
        border-radius: 18px;
    }

    .m-border-radius-20 {
        border-radius: 20px;
    }

    .m-mt-20 {
        margin-top: 20px;
    }

    .m-mb-30 {
        margin-bottom: 30px;
    }

    .m-mb-50 {
        margin-bottom: 50px !important;
    }

    .m-mb-60 {
        margin-bottom: 60px !important;
    }

    .m-mb-70 {
        margin-bottom: 70px !important;
    }

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

    .m-gap-18 {
        grid-gap: 18px;
    }

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

    .m-gap-30 {
        grid-gap: 30px;
    }

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

    .m-gap-50 {
        grid-gap: 50px;
    }

    .m-columns-one {
        grid-template-columns: 1fr !important;
    }

    .m-columns-two {
        grid-template-columns: 1fr 1fr !important;
    }

}

@media (max-width: 390px) {
    .m-headline-md {
        font-size: 26px;
    }
}