Модуль utilities

animation

.animation-fast {animation-duration: .4s;}
.animation-slow {animation-duration: 1.5s;}

.animation-infinite {animation-iteration-count: infinite;}

.animation-delay1s {animation-delay: 1s;}
.animation-delay2s {animation-delay: 2s;}
.animation-delay3s {animation-delay: 3s;}
.animation-delay4s {animation-delay: 4s;}
.animation-delay5s {animation-delay: 5s;}

.animation-fade
.animation-fadeout
.animation-zoom
.animation-zoomout
.animation-top
.animation-left
.animation-right
.animation-bottom
.animation-bounce
.animation-rotatein
.animation-rotateout
.animation-ping
.animation-spin
.animation-pulse

background

.bg-size-cover {background-size: cover;}
.bg-size-contain {background-size: contain;}
.bg-no-repeat {background-repeat: no-repeat;}
.bg-position-center {background-position: center;}
.bg-fixed {background-attachment: fixed;}

.bg-position-var {background-position: var(--bg-position, 50% 50%);}

badge

.badge
.badge-button

block

.b-clearfix

.b-clear {clear: both;}
.b-clear-right {clear: right;}
.b-clear-left {clear: left;}
.b-clear-none {clear: none;}

.b-right {float: right;}
.b-left {float: left;}
.b-float-none {float: none;}
.b-float-none-tablet {float: none for SCREEN_TABLET}

.b-center {margin-left : auto; margin-right: auto;}

.b-hide {display: none;}
.b-hide-imp {display: none !important;}

.b-inline, .b-inline-block {display: inline-block;}

.b-block {display: block;}
.b-block-imp {display: block !important;}

.b-flex {display: flex;}
.b-inline-flex {display: inline-flex;}

.b-grid {display: grid;}
.b-inline-grid {display: inline-grid;}

.b-overlay
.b-overlay-text
<div class="b-overlay">
    <img class="w100 h100" src="img.webp">
    <div class="b-overlay-text">
        <div class="pos0-b">text</div>
    </div>
</div>

border

.bordered {
    border: var(--bordered, #D4D7DD 1px solid);
}

.bor-var {
    border-style: var(--bor-style, solid);
    border-width: var(--bor-width, 1px);
    border-color: var(--bor-color, #D4D7DD);
}

.bor-none {border-style: none !important;}
.bor-none-tb, .bor-none-t {border-top-style: none !important;}
.bor-none-rl, .bor-none-r {border-right-style: none !important;}
.bor-none-tb, .bor-none-b {border-bottom-style: none !important;}
.bor-none-rl, .bor-none-l {border-left-style: none !important;}

.bor-currentColor {border-color: currentColor;}

.bor-solid {border-style:solid;}
.bor-dotted {border-style: dotted;}
.bor-dashed {border-style: dashed;}
.bor-double {border-style: double;}

.bor-solid-t {border-top-style: solid;}
.bor-dotted-t {border-top-style: dotted;}
.bor-dashed-t {border-top-style: dashed;}
.bor-double-t {border-top-style: double;}

.bor-solid-r {border-right-style: solid;}
.bor-dotted-r {border-right-style: dotted;}
.bor-dashed-r {border-right-style: dashed;}
.bor-double-r {border-right-style: double;}

.bor-solid-b {border-bottom-style: solid;}
.bor-dotted-b {border-bottom-style: dotted;}
.bor-dashed-b {border-bottom-style: dashed;}
.bor-double-b {border-bottom-style: double;}

.bor-solid-l {border-left-style: solid;}
.bor-dotted-l {border-left-style: dotted;}
.bor-dashed-l {border-left-style: dashed;}
.bor-double-l {border-left-style: double;}

.bor-solid-tb { border-top-style: solid; border-bottom-style: solid;}
.bor-dotted-tb { border-top-style: dotted; border-bottom-style: dotted;}
.bor-dashed-tb { border-top-style: dashed; border-bottom-style: dashed;}
.bor-double-tb { border-top-style: double; border-bottom-style: double; }

.bor-solid-rl {border-right-style: solid; border-left-style: solid;}
.bor-dotted-rl {border-right-style: dotted; border-left-style: dotted;}
.bor-dashed-rl {border-right-style: dashed; border-left-style: dashed;}
.bor-double-rl {border-right-style: double; border-left-style: double;}

.bor1 {border-width: 1px;}
.bor2 {border-width: 2px;}
.bor3 {border-width: 3px;}
.bor4 {border-width: 4px;}
.bor5 {border-width: 5px;}

.bor-none-tablet {border-style: none !important;}

column

.column-count1 {column-count: 1;}
.column-count2 {column-count: 2;}
.column-count3 {column-count: 3;}
.column-count4 {column-count: 4;}
.column-count5 {column-count: 5;}
.column-count6 {column-count: 6;}
.column-count7 {column-count: 7;}

@media (SCREEN_TABLET) {
    .column-count1-tablet {column-count: 1;}
    .column-count2-tablet {column-count: 2;}
    .column-count3-tablet {column-count: 3;}
    .column-count4-tablet {column-count: 4;}
    .column-count5-tablet {column-count: 5;}
    .column-count6-tablet {column-count: 6;}
    .column-count7-tablet {column-count: 7;}
}

.column-gap10 {column-gap: 10px;}
.column-gap20 {column-gap: 20px;}
.column-gap30 {column-gap: 30px;}
.column-gap40 {column-gap: 40px;}
.column-gap50 {column-gap: 50px;}

.column-rule-var {
    column-rule: var(--column-rule-width, 1px) var(--column-rule-style, solid) var(--column-rule-color, #aaa);
}

.column-var {
    column-count: var(--column-count, 3);
    column-gap  : var(--column-gap, 30px);
    column-rule : var(--column-rule, 1px solid #aaa);
}

cursor

.cursor-pointer {cursor: pointer;}
.cursor-not-allowed {cursor: not-allowed;}
.pointer-none {pointer-events: none;}

drop-cap

.drop-cap:first-letter {
    float: left;
    font-size: 3em;
    font-weight: bold;
    margin-right: 0.75rem;
    text-transform: uppercase;
    line-height: 1;
}

filters

.filter-invert {filter: INVERT(var(--filter-invert, 100%));}
.filter-sepia {filter: SEPIA(var(--filter-sepia, 100%));}
.filter-gray {filter: grayscale(100%);}

.hover-no-filter

flex

// base — «fluid grid»
.flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.flex-row {flex-direction: row;}
.flex-row-reverse {flex-direction: row-reverse;}

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

.flex-wrap {flex-wrap: wrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}
.flex-nowrap {flex-wrap: nowrap;}

.flex-jc-start {justify-content: flex-start;}
.flex-jc-end {justify-content: flex-end;}
.flex-jc-between {justify-content: space-between;}
.flex-jc-around {justify-content: space-around;}
.flex-jc-center, .flex-hcenter {justify-content: center;}

.flex-ai-start {align-items: flex-start;}
.flex-ai-end {align-items: flex-end;}
.flex-ai-baseline {align-items: baseline;}
.flex-ai-stretch {align-items: stretch;}
.flex-ai-center, .flex-vcenter {align-items: center;}

.flex-ac-start {align-content: flex-start;}
.flex-ac-end {align-content: flex-end;}
.flex-ac-center {align-content: center;}
.flex-ac-between {align-content: space-between;}
.flex-ac-around {align-content: space-around;}
.flex-ac-stretch {align-content: stretch;}

.flex-as-auto {align-self: auto;}
.flex-as-start {align-self: flex-start;}
.flex-as-end {align-self: flex-end;}
.flex-as-center {align-self: center;}
.flex-as-baseline {align-self: baseline;}
.flex-as-stretch {align-self: stretch;}

.flex-basis50px {flex-basis: 50px;}
.flex-basis100px {flex-basis: 100px;}
.flex-basis150px {flex-basis: 150px;}
.flex-basis-var {flex-basis: var(--flex-basis, 150px);}

.flex-order1 {order: 1;}
.flex-order2 {order: 2;}
.flex-order3 {order: 3;}
.flex-order4 {order: 4;}
.flex-order5 {order: 5;}

.flex-grow1 {flex-grow: 1;}
.flex-grow2 {flex-grow: 2;}
.flex-grow3 {flex-grow: 3;}
.flex-grow4 {flex-grow: 4;}
.flex-grow5 {flex-grow: 5;}

.flex-shrink1 {flex-shrink: 1;}
.flex-shrink2 {flex-shrink: 2;}
.flex-shrink3 {flex-shrink: 3;}
.flex-shrink4 {flex-shrink: 4;}
.flex-shrink5 {flex-shrink: 5;}

for SCREEN_TABLET:
    .flex-tablet
    .flex-wrap-tablet
    .flex-reverse-tablet
    .flex-vcenter-tablet
    .flex-hcenter-tablet
    .flex-order1-tablet
    .flex-order2-tablet
    .flex-order3-tablet
    .flex-order4-tablet
    .flex-order5-tablet

gradients

.gr-linear-top {
    background: linear-gradient(to top, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-right {
    background: linear-gradient(to right, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-bottom {
    background: linear-gradient(to bottom, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-left {
    background: linear-gradient(to left, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-top-right {
    background: linear-gradient(to top right, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-top-left {
    background: linear-gradient(to top left, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-bottom-right {
    background: linear-gradient(to bottom right, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-linear-bottom-left {
    background: linear-gradient(to bottom left, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-var {
    background: radial-gradient(var(--gr-shape, ellipse at center), var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-circle {
    background: radial-gradient(circle, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-ellipse {
    background: radial-gradient(ellipse, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-closest-side {
    background: radial-gradient(closest-side, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-closest-corner {
    background: radial-gradient(closest-corner, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-farthest-side {
    background: radial-gradient(farthest-side, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-radial-farthest-corner {
    background: radial-gradient(farthest-corner, var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-conic {
    background: conic-gradient(var(--gr-start, var(--primary600)), var(--gr-end, var(--primary800)));
}

.gr-repeating-conic {
    background: repeating-conic-gradient(var(--gr-step, var(--primary600) 10%, var(--primary800) 20%, var(--primary600) 30%, var(--primary800) 40%, var(--primary600) 50%, var(--primary800) 60%, var(--primary600) 70%, var(--primary800) 80%, var(--primary600) 90%  ));
}

.gr-repeating-linear {
    background: repeating-linear-gradient(var(--gr-step, var(--primary600) 10%, var(--primary800) 20%, var(--primary600) 30%, var(--primary800) 40%, var(--primary600) 50%, var(--primary800) 60%, var(--primary600) 70%, var(--primary800) 80%, var(--primary600) 90%  ));
}

.gr-repeating-radial {
    background: repeating-radial-gradient(var(--gr-step, var(--primary600) 10%, var(--primary800) 20%, var(--primary600) 30%, var(--primary800) 40%, var(--primary600) 50%, var(--primary800) 60%, var(--primary600) 70%, var(--primary800) 80%, var(--primary600) 90%  ));
}

grid

.grid-var {
    display              : grid;
    gap                  : var(--grid-gap, 0);
    grid-template-columns: var(--grid-columns, none);
    grid-template-rows   : var(--grid-rows, none);
}

.grid-item-var {
    grid-column: var(--grid-item-column, auto / auto);
    grid-row   : var(--grid-item-row, auto / auto);
}

// .grid-colX: .grid-1col .grid-2col ... .grid-12col
.grid-1col {
    display: grid;
    grid-template-columns: var(--grid-columns, repeat(1, minmax(0, 2fr)));
    gap                  : var(--grid-gap, 0);
    grid-template-rows   : var(--grid-rows, none);
}

.grid-var-tablet {
    display              : grid;
    gap                  : var(--grid-gap-tablet, var(--grid-gap, 0));
    grid-template-columns: var(--grid-columns-tablet, none);
    grid-template-rows   : var(--grid-rows-tablet, none);
}

.grid-item-var-tablet {
    grid-column: var(--grid-item-column-tablet, auto / auto);
    grid-row   : var(--grid-item-row-tablet, auto / auto);
}
            
// .grid-colX-tablet: .grid-1col-tablet .grid-2col-tablet ... .grid-12col-tablet
.grid-1col-tablet {
    display: grid;
    grid-template-columns: var(--grid-columns-tablet, repeat(1, minmax(0, 2fr)));
    gap                  : var(--grid-gap-tablet, 0);
    grid-template-rows   : var(--grid-rows-tablet, none);
}

.gap0 {gap: 0px;}
.gap5 {gap: 5px;}
.gap7 {gap: 7px;}
.gap10 {gap: 10px;}
.gap15 {gap: 15px;}
.gap20 {gap: 20px;}
.gap25 {gap: 25px;}
.gap30 {gap: 30px;}
.gap40 {gap: 40px;}
.gap50 {gap: 50px;}
.gap100 {gap: 100px;}

height

.h100 {height: 100%;}
.h-auto {height: auto;}

// X = 10, 15, 20, 30, 40, 50, 60, 70, 100, 200, 300, 400, 500
.hXpx {height: Xpx;}
.hXpx-min {min-height: Xpx !important;}
.hXpx-max {max-height: Xpx !important;}

50, 100
.h50vh {height: 50vh;}
.h50vh-min {min-height: 50vh;}
.h50vh-max {max-height: 50vh;}

.h100vh {height: 100vh;}
.h100vh-min {min-height: 100vh;}
.h100vh-max {max-height: 100vh;}

.h-auto-tablet {
    height: auto;
    min-height: 0;
    max-height: none;
}

icons

.icon0:before {margin-right: 0 !important;}

.icon-circle,
.icon-square,
.icon-rounded {
    line-height: 2 !important; // fix .fa from FA5
    width: 2em;
    height: 2em;
    display: inline-block;
    text-align: center;

    &:before {
        margin: 0 !important;
        vertical-align: baseline;
    }
}

.icon-circle {border-radius: 50%;}
.icon-rounded {border-radius: var(--icon-rounded-radius, 5px);}

.icon-arrow-right::after {content: ' →';}
.icon-arrow-left::before {content: '← ';}
.icon-angle-right::after {content: ' ›';}
.icon-angle-left::before {content: '‹ ';}

image-effects

.hover-img-scale
.hover-img-shadow
.hover-img-opacity1
.hover-img-opacity2
.hover-img-gray
.hover-img-gray30
.hover-img-gray50
.hover-img-gray70
.hover-img-sepia
.hover-img-sepia50

layout

.layout-center-wrap {width: 100%;}

.layout-center,
.layout-center-wrap>.layout-wrap {
    width       : 100%;
    margin-right: auto;
    margin-left : auto;
    max-width   : var(--layout-max-width, 1200px);
    padding-right: var(--layout-wrap-padding, 15px);
    padding-left : var(--layout-wrap-padding, 15px);
}

.layout-center-tablet,
.layout-center-wrap-tablet>.layout-wrap {
    width       : 100%;
    margin-right: auto;
    margin-left : auto;
    max-width   : 768px;
    padding-right: var(--layout-wrap-padding, 15px);
    padding-left : var(--layout-wrap-padding, 15px);
}

.w-tablet {width: 768px;}
.w-tablet-max {max-width: 768px;}
.w-tablet-min {min-width: 768px;}

line-height

.lh100 {line-height: 1.0;}
.lh110 {line-height: 1.1;}
.lh120 {line-height: 1.2;}
.lh130 {line-height: 1.3;}
.lh140 {line-height: 1.4;}
.lh150 {line-height: 1.5;}
.lh160 {line-height: 1.6;}
.lh170 {line-height: 1.7;}
.lh180 {line-height: 1.8;}
.lh190 {line-height: 1.9;}
.lh200 {line-height: 2.0;}

.lh100em {line-height: 1.0em;}
.lh110em {line-height: 1.1em;}
.lh120em {line-height: 1.2em;}
.lh130em {line-height: 1.3em;}
.lh150em {line-height: 1.5em;}
.lh180em {line-height: 1.8em;}
.lh200em {line-height: 2.0em;}

links

a.hover-no-color:hover {color: inherit;}
a.hover-no-underline:hover {text-decoration: none;}

// for childs
.hover-no-color a:hover {color: inherit;}
.hover-no-underline a:hover {text-decoration: none;}

.links-no-color a:not([class^="t-"]):not([class*=" t-"]) {color: inherit;}
.links-no-color-imp a {color: inherit !important;}

.color-inherit {color: inherit;}

lists

ul.list-unstyled {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

ul.list-inline {
    list-style: none;
    margin: 0;
    padding-left: 0;

    >li {
        display: inline-block;
    }
}

ul.no-margin {
    padding-left: 0; 
    list-style-position: inside;
}

ul.list-inside {list-style-position: inside;}
ul.list-outside {list-style-position: outside;}

ul.no-bullet {list-style: none;}
ul.square {list-style-type: square;}

ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle;}

object-fit

.object-fit-fill {object-fit: fill;}
.object-fit-contain {object-fit: contain;}
.object-fit-cover {object-fit: cover;}
.object-fit-scale-down {object-fit: scale-down;}
.object-fit-none {object-fit: none;}

opacity

.bg-transparent {background-color: transparent !important;}
.t-transparent {color: transparent !important;}

.bg-op-var {background-color: rgba(var(--bg-op-red, 0), var(--bg-op-green, 0), var(--bg-op-blue, 0), var(--bg-op, .7));}
.bg-op-white-var {background-color: rgba(var(--bg-op-red, 255), var(--bg-op-green, 255), var(--bg-op-blue, 255), var(--bg-op, .7));}

.opacity10, .hover-opacity10:hover {opacity: .1;}
.opacity20, .hover-opacity20:hover {opacity: .2;}
.opacity30, .hover-opacity30:hover {opacity: .3;}
.opacity40, .hover-opacity40:hover {opacity: .4;}
.opacity50, .hover-opacity50:hover {opacity: .5;}
.opacity60, .hover-opacity60:hover {opacity: .6;}
.opacity70, .hover-opacity70:hover {opacity: .7;}
.opacity80, .hover-opacity80:hover {opacity: .8;}
.opacity90, .hover-opacity90:hover {opacity: .9;}
.opacity100, .hover-opacity100:hover {opacity: 1;}

.bg-op10, .hover-bg-op10:hover {background-color: rgba(0, 0, 0, .1);}
.bg-op20, .hover-bg-op20:hover {background-color: rgba(0, 0, 0, .2);}
.bg-op30, .hover-bg-op30:hover {background-color: rgba(0, 0, 0, .3);}
.bg-op40, .hover-bg-op40:hover {background-color: rgba(0, 0, 0, .4);}
.bg-op50, .hover-bg-op50:hover {background-color: rgba(0, 0, 0, .5);}
.bg-op60, .hover-bg-op60:hover {background-color: rgba(0, 0, 0, .6);}
.bg-op70, .hover-bg-op70:hover {background-color: rgba(0, 0, 0, .7);}
.bg-op80, .hover-bg-op80:hover {background-color: rgba(0, 0, 0, .8);}
.bg-op90, .hover-bg-op90:hover {background-color: rgba(0, 0, 0, .9);}
.bg-op100, .hover-bg-op100:hover {background-color: rgba(0, 0, 0, 1);}

padding-margin

// X: 0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 100
.padX {padding: Xpx !important;}
.padX-top {padding-top: Xpx !important;}
.padX-right {padding-right: Xpx !important;}
.padX-bottom {padding-bottom: Xpx !important;}
.padX-left {padding-left: Xpx !important;}

.padX-tb {padding-top: Xpx !important; padding-bottom: Xpx !important;}
.padX-rl {padding-right: Xpx !important; padding-left: Xpx !important;}

.marX {margin: Xpx !important;}
.marX-top {margin-top: Xpx !important;}
.marX-right {margin-right: Xpx !important;}
.marX-bottom {margin-bottom: Xpx !important;}
.marX-left {margin-left: Xpx !important;}

.marX-tb {margin-top: Xpx !important; margin-bottom: Xpx !important;}
.marX-rl {margin-right: Xpx !important; margin-left: Xpx !important;}

// X: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 20, 25, 30
.mar-beforeX::before {margin-right: Xpx;}

for SCREEN_TABLET:
    // X: 0, 5, 10, 20, 30, 50
    .padX-tablet {padding: Xpx !important;}
    .padX-top-tablet {padding-top: Xpx !important;}
    .padX-right-tablet {padding-right: Xpx !important;}
    .padX-bottom-tablet {padding-bottom: Xpx !important;}
    .padX-left-tablet {padding-left: Xpx !important;}

    .padX-tb-tablet {padding-top: Xpx !important; padding-bottom: Xpx !important;}
    .padX-rl-tablet {padding-right: Xpx !important; padding-left: Xpx !important;}

    .marX-tablet {margin: Xpx !important;}
    .marX-top-tablet {margin-top: Xpx !important;}
    .marX-right-tablet {margin-right: Xpx !important;}
    .marX-bottom-tablet {margin-bottom: Xpx !important;}
    .marX-left-tablet {margin-left: Xpx !important;}

    .marX-tb-tablet {margin-top: Xpx !important; margin-bottom: Xpx !important;}
    .marX-rl-tablet {margin-right: Xpx !important; margin-left: Xpx !important;}

position

.pos-fixed {position: fixed;}
.pos-absolute {position: absolute;}
.pos-relative {position: relative;}
.pos-sticky {position: sticky;}

.pos-sticky-tablet {position: sticky;}
.pos-sticky-tablet-none {position: static;}

// X: 0, 10, 20, 30, 40, 50, 60, 80
.posX-t {top: Xpx;}
.posX-r {right: Xpx;}
.posX-b {bottom: Xpx;}
.posX-l {left: Xpx;}

.z-index1 {z-index: 1;}
.z-index2 {z-index: 2;}
.z-index9 {z-index: 9;}
.z-index99 {z-index: 99;}
.z-index999 {z-index: 999;}
.z-index9999 {z-index: 9999;}

rounded

.rounded-circle {border-radius: 50%;}
.rounded {border-radius: var(--rounded-radius, 7px);}

// X: 0, 3, 5, 7, 10, 20
.roundedX {
    border-radius: Xpx !important;
}

.roundedX-r {
    border-top-right-radius: Xpx !important;
    border-bottom-right-radius: Xpx !important;
}

.roundedX-l {
    border-top-left-radius: Xpx !important;
    border-bottom-left-radius: Xpx !important;
}

.roundedX-t {
    border-top-left-radius: Xpx !important;
    border-top-right-radius: Xpx !important;
}

.roundedX-b {
    border-bottom-left-radius: Xpx !important;
    border-bottom-right-radius: Xpx !important;
}

shadow

.t-shadow {text-shadow: var(--shadow-t, $shadow-t);}

.b-shadow {box-shadow: var(--shadow-b, $shadow-b);}

.hover-b-shadow1:hover, .b-shadow1 {box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);}

.hover-b-shadow2:hover, .b-shadow2 {box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);}

.hover-b-shadow3:hover, .b-shadow3 {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}

.hover-b-shadow4:hover, .b-shadow4 {box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}

.hover-b-shadow5:hover, .b-shadow5 {box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}

.hover-b-shadow6:hover, .b-shadow6 {box-shadow: 0 0 7px -1px rgba(0, 0, 0, 0.3);}

table

.table-layout-fixed {table-layout: fixed;}
.table-layout-auto {table-layout: auto;}
.table-caption-bottom {caption-side: bottom;}

text

.t-normal {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

.t-bold {font-weight: bold;}
.t-bold-normal {font-weight: normal;}
.t-bold-bolder {font-weight: bolder;}
.t-bold-light {font-weight: lighter;}

.t-bold100 {font-weight: 100;}
.t-bold200 {font-weight: 200;}
.t-bold300 {font-weight: 300;}
.t-bold400 {font-weight: 400;}
.t-bold500 {font-weight: 500;}
.t-bold600 {font-weight: 600;}
.t-bold700 {font-weight: 700;}
.t-bold800 {font-weight: 800;}
.t-bold900 {font-weight: 900;}

.t-italic {font-style: italic;}

.t-underline {text-decoration: underline;}
.t-strike {text-decoration: line-through;}
.t-overline {text-decoration: overline;}
.t-decoration-none {text-decoration: none;}
.t-decoration-solid {text-decoration-style: solid;}
.t-decoration-wavy {text-decoration-style: wavy;}
.t-decoration-double {text-decoration-style: double;}
.t-decoration-dotted {text-decoration-style: dotted;}
.t-decoration-dashed {text-decoration-style: dashed;}

.t-underline-offset0px {text-underline-offset: 0px;}
.t-underline-offset1px {text-underline-offset: 1px;}
.t-underline-offset2px {text-underline-offset: 2px;}
.t-underline-offset4px {text-underline-offset: 4px;}
.t-underline-offset9px {text-underline-offset: 8px;}
.t-underline-offset-auto {text-underline-offset: auto;}

.t-small-caps {font-variant: small-caps;}
.t-capitalize {text-transform: capitalize;}
.t-upper {text-transform: uppercase;}
.t-lower {text-transform: lowercase;}

.t-right {text-align: right;}
.t-left {text-align: left;}
.t-center {text-align: center;}
.t-justify {text-align: justify;}

.t-nowrap, .text-nowrap {white-space: nowrap;}
.t-wrap, .text-wrap { white-space: normal;}
.t-pre-wrap {white-space: pre-wrap;}
.t-break-word {word-wrap: break-word;}
.t-break-all {word-break: break-all;}
.t-break-keep {word-break: keep-all;}

.t-rtl {direction: rtl;}
.t-ltr {direction: ltr;}

.t-writing-htb {writing-mode: horizontal-tb;}
.t-writing-vrl {writing-mode: vertical-rl;}
.t-writing-vlr {writing-mode: vertical-lr;}

// safe fonts -> https://www.cssfontstack.com/
.t-georgia {font-family: Georgia, "Times New Roman", serif;}
.t-palatino {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
.t-times {font-family: "Times New Roman", serif;}
.t-arial {font-family: Arial, Helvetica, Verdana, sans-serif;}
.t-arial-black {font-family: "Arial Black", Gadget, sans-serif;}
.t-comic {font-family: "Comic Sans MS", cursive, sans-serif;}
.t-impact {font-family: Impact, Charcoal, sans-serif;}
.t-tahoma {font-family: Tahoma, Geneva, sans-serif;}
.t-trebuchet {font-family: "Trebuchet MS", Helvetica, sans-serif;}
.t-verdana {font-family: Verdana, Arial, Helvetica, sans-serif;}

.t-mono {font-family: SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace;}

.t-tracking-50 {letter-spacing: -0.05em;}
.t-tracking-25 {letter-spacing: -0.025em;}
.t-tracking0 {letter-spacing: 0em;}
.t-tracking25 {letter-spacing: 0.025em;}
.t-tracking50 {letter-spacing: 0.05em;}
.t-tracking100 {letter-spacing: 0.1em;}
.t-tracking150 {letter-spacing: 0.15em;}
.t-tracking200 {letter-spacing: 0.2em;}

.t-hyphens {
    -webkit-hyphens: auto;
    -moz-hyphens   : auto;
    -ms-hyphens    : auto;
    hyphens        : auto;
}

.t-ellipsis {
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.t-line-clamp {
    overflow          : hidden;
    display           : -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp, 3);
}

// REM
// X: .8, .85, .9, .95, 
// 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 
// 2, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9, 
// 3, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 
// 4, 4.5, 5
// .t100 = 1rem
.t(X*100) {font-size: Xrem;}

.t50em {font-size: .5em;}
.t60em {font-size: .6em;}
.t70em {font-size: .7em;}
.t80em {font-size: .8em;}
.t90em {font-size: .9em;}
.t100em {font-size: 1em;}
.t200em {font-size: 2em;}

// X: 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50
.tXpx {font-size: Xpx;}

.t-right-tablet {text-align: right;}
.t-left-tablet {text-align: left;}
.t-center-tablet {text-align: center;}
.t-justify-tablet {text-align: justify;}

.t-nowrap-tablet {white-space: nowrap;}
.t-wrap-tablet {white-space: normal;}

// X: .8, .9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2, 3, 4, 5
// .t100-tablet = 1rem
.t(X*100)-tablet {font-size: Xrem;}

transform

.rotate180 {transform: rotate(180deg);}
.rotate90 {transform: rotate(90deg);}
.rotate45 {transform: rotate(45deg);}

transition

.transition-var,
.transition-child-var * {
    transition: all var(--transition-duration, .5s);
}

.transition-duration,
.transition-duration * {
    transition: all .5s;
}

// X: 0, 75, 100, 150, 200, 300, 500, 700, 1000
.transition-durationX,
.transition-durationX * {
    transition: all Xms;
}

.transition-ease-linear,
.transition-ease-linear * {
    transition-timing-function: linear;
}

.transition-ease-in,
.transition-ease-in * {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.transition-ease-out,
.transition-ease-out * {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.transition-ease-in-out,
.transition-ease-in-out * {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

vendor

// alpine js
[x-cloak] {display: none !important}

// bootstrap icons
.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
    margin-right: 7px !important;
}

// https://highlightjs.org/
.hljs {
    background: var(--pre-bg-color) !important;
    color: var(--pre-text-color) !important;
}

vertical-align

.va-baseline,
.va-baseline\:before:before {
    vertical-align: baseline;
}

.va-top,
.va-top\:before:before {
    vertical-align: top;
}

.va-middle,
.va-middle\:before:before {
    vertical-align: middle;
}

.va-bottom,
.va-bottom\:before:before {
    vertical-align: bottom;
}

.va-text-top,
.va-text-top\:before:before {
    vertical-align: text-top;
}

.va-text-bottom,
.va-text-bottom\:before:before {
    vertical-align: text-bottom;
}

.va-sub,
.va-sub\:before:before {
    vertical-align: sub;
}

.va-super,
.va-super\:before:before {
    vertical-align: super;
}

video

// для адаптивного обрамления ютубовского видео
// <div class="video-r"> код видео </div>
// video-rubber
.video-r { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
}

.video-r iframe, 
.video-r object, 
.video-r embed {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%; 
}

visible

.visibility-hidden {visibility: hidden;}
.visibility-visible {visibility: visible;}

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

.overscroll-behavior-contain {overscroll-behavior: contain;}
.overscroll-behavior-none {overscroll-behavior: none;}

.hide-tablet {display: none !important;}
.show-tablet {display: block !important;}

width

.w-layout-max {
    width: 100%;
    max-width: 1200px;
}

.w-auto {width: auto;}

.w-max-none {max-width: none;}
.w100-max {max-width: 100%;}
.w-max-min-content {max-width: min-content;}
.w-max-max-content {max-width: max-content;}
.w-max-fit-content {max-width: fit-content;}

.w-min-none {min-width: 0;}
.w-min-min-content {min-width: min-content;}
.w-min-max-content {min-width: max-content;}
.w-min-fit-content {min-width: fit-content;}

// X: 1..12    
.wXcol {width: X/12%;}
.wXcol-tablet {width: X/12%;}

// X: 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 100, 150, 200, 250, 300, 400, 500, 600, 700, 800
.wXpx {width: Xpx;}
.wXpx-min {min-width: Xpx;}
.wXpx-max {max-width: Xpx;}
.wXpx-tablet {width: Xpx;}
.wXpx-min-tablet {min-width: Xpx;}
.wXpx-max-tablet {max-width: Xpx;}

// X: 0, 1, 2, 3, 4, 5, 10, 15, 20, 21, 22, 23, 24, 25, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 60, 65, 66, 67, 68, 69, 70, 75, 80, 85, 90, 95, 100
.wX {width: X%;}
.wX-min {min-width: X%;}
.wX-max {max-width: X%;}
.wX-tablet {width: X%;}
.wX-min-tablet {min-width: X%;}
.wX-max-tablet {max-width: X%;}

.w-auto-tablet {width: auto;}
.w100-max-tablet {max-width: 100%;}
.w0-min-tablet {min-width: 0;}