kit/assets/flex-kit/flex-kit.css

/* flex-kit.css */
* {
    /*outline: none;*/
}

script, style {
    display: none !important;
}

:root {
    --gap: 10px;
    --gap-section: 30px;
    --gap-wrapper: 30px;
    --col-span: 1;
    --line-clamp: 3;
    --line-clamp-height: 1.3em;
    --width-wrapper: 1200px;
    --flex-aspect-ratio: 1;
    --aspect-ratio: 1;
    --font-ratio-height: 0.9;
    --font-ratio-bottom: 0.1;
}
.kit-wrapper {
    box-sizing: border-box;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: var(--width-wrapper);
    max-width: 100%;
    padding: 0 var(--gap-wrapper);
}

.kit-sections {
    box-sizing: border-box;
    position: relative;
    padding-top: var(--gap-section);
}
.kit-section {
    box-sizing: border-box;
    position: relative;
    margin-bottom: var(--gap-section);
}

.kit-line-clamp {
    line-height: var(--line-clamp-height);
    max-height: calc(var(--line-clamp-height) * var(--line-clamp));
    display: inline-block;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    display: -webkit-box;
    word-break: break-word;
    white-space: normal;
}

.flex-list {
    box-sizing: border-box;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    --col-span: 1;
    --col-count: 4;
    --gap-row: var(--gap);
    --flex-list-width: calc(100%);
}
.flex-list:not(.owl-loaded) {
    margin-left: calc(var(--gap) / -2) !important;
    margin-right: calc(var(--gap) / -2) !important;
    margin-top: calc(var(--gap-row) / -2) !important;
    margin-bottom: calc(var(--gap-row) / -2) !important;
}

.flex-list:before,
.flex-list:after {
    content: '';
}
.flex-list:not(.owl-loaded,.slick-slider) > * {
    position: relative;
    padding-left: calc(var(--gap) / 2);
    padding-right: calc(var(--gap) / 2);
    padding-top: calc(var(--gap-row) / 2);
    padding-bottom: calc(var(--gap-row) / 2);
}
.flex-list-item {
    --col-width: calc(100% / var(--col-count) * var(--col-span));
    --line-height: calc(100% / var(--line-count, 1) * var(--line-span, 1));
    box-sizing: border-box;
}
.flex-list > .flex-list-item {
    width: var(--col-width) !important;
    max-width: var(--col-width) !important;
    flex-basis: var(--col-width) !important;
}
.flex-list-item:before,
.flex-list-item:after {
    content: '';
}

.flex-list-item-delimiter {
    height: 0;
    width: 0;
    flex: 1 0 0;
}
.flex-list--static {
    --line-count: 1;
}
.flex-list--static .flex-list-item {
    height: var(--line-height) !important;
    max-height: var(--line-height) !important;
}

/* .flex-aspect-ratio */

.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img
{
    height: auto;
    object-fit: contain;
}

.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto),
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)
{
    position: relative;
    padding: 0;
}

.flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before,
.flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
{
    content: "";
    display: block;
    width: 100%;
    padding-bottom: calc(100% / (var(--flex-aspect-ratio)));
}

.flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before
{
    content: "";
    display: block;
    width: 100%;
    padding-bottom: calc((100% / var(--col-span, 1) - 0 * var(--gap, 10px)) / var(--flex-aspect-ratio));
}

.flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
{
    content: "";
    display: block;
    width: 100%;
    padding-bottom: calc(100% / (var(--flex-aspect-ratio)));
}

.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture,
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture {
    width: 100%;
    height: 100%;
}
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img,
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child,
.flex-list-item.aspect-ratio > :first-child
{
    padding: calc(var(--gap) / 2);
}


/* --aspect-ratio */

@supports (--aspect-ratio:0) {

    .aspect-ratio {
        position: relative;
        width: 100%;
    }

    .aspect-ratio > img {
        height: auto;
        object-fit: contain;
    }
    .aspect-ratio::before {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
        pointer-events: none;
    }
    .aspect-ratio > :first-child {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        object-fit: contain;
    }
}

/* picture - icon */
.kit-icon picture,
.kit-icon img,
.kit-icon svg,
.kit-picture picture,
.kit-picture img,
.kit-picture svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    fill: currentColor;
    transition: inherit;
    object-fit: contain;
    object-position: center;
}
.kit-picture-line, .kit-icon-line {
    display: inline-block;
    margin-bottom: calc(-1em * var(--font-ratio-bottom, 0.2));
}
.kit-picture-line svg,
.kit-picture-line picture,
.kit-picture-line img,
.kit-icon-line svg,
.kit-icon-line picture,
.kit-icon-line img {
    height: calc(1em * var(--font-ratio-height, 1));
    width: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: baseline;
    display: block;
    fill: currentColor;
    transition: inherit;
    object-fit: contain;
    object-position: center;
    margin: auto;
}




/* flex-kit.css end */