/*md
@no-stat

# Breakpoints

## Boilerplate breakpoints

Boilerplate has 4 main breakpoints that targeted to [supported devices](https://confluence.ontrq.com/display/RSB/SFRA+BP+-+Supported+Browsers+and+Devices)
 - iPhone X, iPad, MS Windows desktop / Macbook Pro retina

** Please not iPad landscape - is LG breakpoint **

[See more info](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception)

## Supported screen resolutions

Boilerplate is come "Retina ready". It supports MDPI and XHDPI pixel density across all site.

| Device             | Screen Resolution, CSS pixels | Pixel density |
|--------------------|-------------------------------|---------------|
| Desktop Windows PC | 1920x1080                     | MDPI          |
| Macbook pro 13     | 1280x800 / 1440x900           | XHDPI         |
| iPad Air 2         | 1024x768                      | XHDPI         |
| iPhone X           | 375x812                       | XHDPI         |
| Samsung Galaxy S9  | 360x740                       | XHDPI         |

*/
/*md
@no-stat

# Media queries (breakpoints)

We have a `media` mixin for make it easier to implement responsive styling via media queries.

You can nest them right within other blocks of CSS,which puts the properties and values you are changing right next
to each other.
That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain
those changes separated by tons of other code or in a different file.

## Configuration

**Site Layout Conception** details with examples you can find [here](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception)

`media` mixin works with `$media` map where `media-name: media query`

This is how `$media` map looks:

```scss
$media: (
	sm: 'screen and (max-width: 767px)',
	md: 'screen and (min-width: 768px) and (max-width: 1023px)',
	md-landscape:  'screen and (min-width: 1024) and (max-width: 1200)',
	lg: 'screen and (min-width: 1024px) and (max-width: 1366px)',
	xl: 'screen and (min-width: 1367px)',
	md-up: 'screen and (min-width: 768px)',
	md-down: 'screen and (max-width: 1023px)',
	lg-up: 'screen and (min-width: 1024px)',
	lg-down: 'screen and (max-width: 1366px)'
);
```

## Usage

Here is how to use `media()` mixin:

```scss
.b-block {
	// styles outside of a media query

	@include media(sm) {
		// styles for "s" viewports
	};

	@include media(md-up) {
		// styles for "m" and "l" viewports
	};
}
```

Simply edit this file and add your own media queries to `$media` map.

*/
/*md
@no-stat

# Colors

## Palette

This is palette settings for project. It divided into 2 main categories palette and applied color.

* Palette is general set of colors.
* Applied colors designed as layer of abstraction to have ability to overwritten on brand level.

## Naming convention

Pattern: `<component-name>__<property>--<state>`

`<component-name>` refers to the name of the component or element that
the custom property is associated with.

`<property>` refers to the CSS property being defined, such as
`color`, `background`, `border`, `outline`, `fill`, etc.
Please don't use short names for property such as `bg` etc.

`<state>` term refers to the different states or conditions that a component might be in,
such as `hover`, `active`, `disabled`, `focus`, `invalid`, `error`, `placeholder` etc.

For example, if we have a button component, we might define custom properties for its text color and background color,
like this:

```scss
{$}color-primary-button__color: $color-white;
{$}color-primary-button__background: $color-blue-900;
```

If we want to define a variation of the button that has a different background color when it's in a hovered state,
we can add the state to the custom property name:

```scss
{$}color-primary-button__background--hover: $color-grey-900;
```
*/
/*md
@no-stat

# Globals variables

This variables are set of different global settings that is used across sets of components.

It include:

* globals
* depth of components (box-shadow)
* motion of components

*/
/*md
@no-stat

# Rh (Indents rhythm)

This function is designed to keep consistency of vertical and horizontal indents in the project.

Not all values are identical in design, sometimes 20px become 21px, 19px, 22px etc. It does not make
any sense to implement it as is. To keep indents consistent we need to round this values to 4px steps.

Ex: in design 22px / 19px -> rh(5) => 20px; in design 23px -> rh(6) => 24px etc.

This is alternate approach to `$space-md: 10px; $space-lg: 20px;`.

Designers should use the rhythm in his work.

## Usage

```scss
.component {
	@include rh(2); // => 8px
	@include rh(2 4 0); // => 8px 16px 0
}
```
*/
/*md
@no-stat

# Z-indexes

Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is difficult.
With different stacking orders and contexts, keeping track of them as their numbers increase can be hard.
<br />
<br />
We use sass function to help manage z-indexes from single place.
The most important requirement of this technique is sticking to it.
Any rogue hard-coded z-index values could compromise the integrity of those derived from your list.

## Usage

**We don't use hardcoded integer `z-index` values. Instead, we use indexes from the map `$z-indexes`**

### 1. Set up `$z-indexes` map
```scss
$z-indexes: (
    components: (
        component_name: (),
        checkbox: (
            before: (),
            after: (),
            icon: (),
        )
    ),
    content: (),
    popup-menu: ()
);
```

### 2. Add values in SCSS classes using `z()` function

#### Global components
```scss
.b-components { z-index: z(components); }
.b-content { z-index: z(content); }
.b-pop_up-menu { z-index: z(popup-menu); }
```

#### Inside a component
```scss
.b-component_name { z-index: z(components, component_name); }
.b-checkbox {
    &-before { z-index: z(components, checkbox, before); }
    &-after { z-index: z(components, checkbox, after); }
    &-icon { z-index: z(components, checkbox, icon); }
}
```

### 3. Get resulting CSS
```scss
.b-components { z-index: 1; }
.b-content { z-index: 2; }
.b-pop_up-menu { z-index: 3; }

.b-component_name { z-index: 1; }
.b-checkbox-before { z-index: 1; }
.b-checkbox-after { z-index: 2; }
.b-checkbox-icon { z-index: 3; }
```

*/
/* stylelint-disable-next-line */
/*md
@no-stat

# Grids

## How to setup grids config for project

### Several grid configs for project

We can use several grid configs per project. For that, we need to add a new grid name to the `$grids` map with settings.

### Gaps / margin / column span configuration:

```scss
$grids: (
	default: (
		grid-columns: ('xl': 12,   'lg': 12,   'md': 12,   'sm': 6),
		grid-gutter:  ('xl': 20px, 'lg': 20px, 'md': 16px, 'sm': 9px),
		grid-margin:  ('xl': 88px, 'lg': 60px, 'md': 32px, 'sm': 15px),
	)
);
```

### Grid-span configuration

Please see details [grid-span](01-core-functions-grid-span.html)

## Work with grids

### Development approaches

#### 1. Using `g-grid` mixin

With features of `display: grid`. Please see [g-grid](02-components-g-grid.html) details.

#### 2. Using `grid-span` function

Could be used in conjunction with different display properties while maintaining their common features(floating, centering, etc.). Please see [grid-span](01-core-functions-grid-span.html) details.

### Get gaps / margin / column span

For that we have the next grid functions in `_grids_tools.scss`:
- grid-gutter
- grid-margin
- grid-columns

Please see [grid functions](00-configuration-grids_tools.html) details with usage examples.

### Examples of usage

Please see [ready-made tools](05-blocks-guide-l-cols.html) details.

*/
/*md
@no-stat

# grid-* (grid config get functions)

This functions designed to get parameters from grid configuration config and
use it for creating grids or reuse grid configuration into different components.

* `grid-gutter`
* `grid-columns`
* `grid-margin`

## Usage

```scss

// Configuration:

$grids: (
	default: (
		grid-columns: ('xl': 12,   'lg': 12,   'md': 12,   'sm': 6),
		grid-gutter:  ('xl': 20px, 'lg': 20px, 'md': 16px, 'sm': 9px),
		grid-margin:  ('xl': 88px, 'lg': 60px, 'md': 32px, 'sm': 15px),
	),
	altered: (
		grid-columns: ('xl': 10,   'lg': 10,   'md': 10,   'sm': 6),
		grid-gutter:  ('xl': 10px, 'lg': 10px, 'md': 10px, 'sm': 10px),
		grid-margin:  ('xl': 40px, 'lg': 30px, 'md': 30px, 'sm': 20px),
	)
);

// Usage:

.component {
	padding: grid-gutter('lg'); // => grids -> 'default' -> grid-gutter -> lg = 20px
	padding: grid-gutter('lg', 'altered'); // => => grids -> 'altered' -> grid-gutter -> lg = 10px
}

.component-b {
	margin: grid-margin('lg');
	margin: grid-margin('lg', 'altered');

	@include media(sm) {
		margin: grid-margin('sm');
	}
}

.component-c {
	width: percentage(grid-columns('lg') / 4);

	@include media(sm) {
		width: percentage(grid-columns('sm') / 2);
	}
}
```
*/
/* stylelint-disable-next-line */
/*md
@no-stat

# Icons variables

This is auto generated file. Please do not edit `_icons.scss`.

List of all icons is [here](./iconsl360.html)

Please see [icons](./01-core-mixins-doc-_icons.html) documentation for details.

*/
/*md
@no-stat

# grid-span

`grid-span` function returns value which could be used as **width, max-witdth, flex-basis, etc.**

### Parameters
```scss
@function grid-span($column: 1, $break: 'lg', $with-gutter: false, $grid: 'default')
```

## Examples

### Flex-basis example

```scss
.b-grid {
	display: flex;

	.b-grid__item {
		flex-basis: grid-span($column: 3);
	}
}
```

### Floated items example

```scss
.b-grid {
	.b-grid__item {
		float: left;
		width: grid-span($column: 2);
	}
}
```

### Inline-block items example

```scss
.b-grid {
	.b-grid__item {
		display: inline-block;
		max-width: grid-span($column: 2);
	}
}
```

*/
/*md
@no-stat

# aspect-ratio

This function used to get percentage value of aspect ratio color to use in `padding` to
create container for images.

This technique used to prevent content bouncing during load and create layout shifts.

Calculation. 16:9 Aspect Ratio would result `(9 / 16) * 100 = 0.5625%`.

See proposed [specs](https://drafts.csswg.org/css-sizing-4/#aspect-ratio)

## Arguments

```
$width - width of element
$height - height of element

=> percentage

aspect-ratio($width, $height)
```

## Usage

```scss
.component {
	padding-bottom: aspect-ratio(16, 9);
	padding-bottom: aspect-ratio(1920, 1080);
	padding-bottom: aspect-ratio(1920px, 1080px);
}

.b-suggestions-item_image {
	@include g-image_container(_container, aspect-ratio(16, 9));

	img {
		@include g-image_container(_img);
	}
}
```

*/
/*md
@no-stat

# Hide

This mixin is especially useful for hiding text
or visually hide needed elements

Here is a list of parameters you can use:

* text - helps to hide text without loosing visibility for parsers
* visually - like for text but for the whole element

## Usage

```scss
.component {
	@include hide(visually);
}

.h-hide_vis {
	@include hide(visually, true);
}
```
*/
/*md
@no-stat

# Hover-supported

This mixin is designed to address iOS standard behavior of first tap - hover,
second tap - click that is engaged when control has hover styles applied.

This is critical for functionality like back-top-button. If we apply hover styles as is.
It would be activated only after second tap.

If rules are wrapped into this media it applied only in case if device have fine
pointer mechanism. [See more info](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer).

Please note about mixed input devices - touch screen + mouse + touchpad,
touchpad + trackpoint, touch screen + stylus ("apple pencil") etc. -
sometimes browser do not report it properly, so logic should be builded around
exclusions.

## Usage

```scss
.component {
	@include hover-supported {
		&:hover {
			// Hover styles that should not be applied to touch
		}
	};
}
```
*/
/*md
@no-stat

# RTL selector

This mixin is designed to alter styles for RTL languages.

It mostly needed for alter position:absolute left|right coords, but could be used
as facade for different selectors.

## Usage

```scss
.component {
	left: 0;
	@include rtl {
		left: initial;
		right: 0;
	};
}
```
*/
/*md
@no-stat

# Icons

List of all icons is [here](./iconsl360.html)

Please see [icons](./01-core-mixins-doc-_icons.html) documentation for details.

*/
/*md
@no-stat

# Carousel slide dimension

This mixin calculates the max-width and min-width for carousel items
based on the number of slides to show and the gap between them.
It is designed to help create responsive carousel layouts by ensuring that the items adjust their sizes appropriately,
taking into account the specified gaps.

## Usage

```scss
.b-carousel-item {
	@include calculate-carousel-item(4, 20px);
}
```
*/
/*md

# g-button

Designed to provide same styles of buttons across different components.
It is possible to use with `<button>` or `<a>` elements

*/
/*md

# g-button_iconed

Designed to provide same styles of buttons that contain only icon (without any text)
across different components without explicit CSS class.

It is used for header menubar icons, hamburger menu items and dialog close button.

```scss
.b-dialog {
	// ...
	&-close {
		@include g-button_iconed;
	}
}
```
*/
/*md

# g-radio

The component is generally used for choosing item which includes in the radio group.

## Usage

Only one g-radio in a given group can be selected at the same time.

If user selects one option in the list that other options come to unselected.

`g-radio` has states: unchecked, checked, hover, disabled and invalid.

## Unchecked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-2" class="b-radio-input"/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-2">Some text</label>
</div>
```

## Checked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-3" class="b-radio-input" checked/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-3">Some text</label>
</div>
```

## Disabled unchecked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-4" class="b-radio-input" disabled/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-4">Some text</label>
</div>
```

## Disabled checked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-5" class="b-radio-input" checked disabled/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-5">Some text</label>
</div>
```

## Invalid unchecked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-6" class="b-radio-input m-invalid"/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-6">Some text</label>
</div>
```

## Invalid checked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-7" class="b-radio-input m-invalid" checked/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-7">Some text</label>
</div>
```

## Customization by SCSS

Radio button styles that used in several component.

Designed to use same style of radio in different components
ex: b-radio, b-payment_option, b-shipping_option, b-stores etc.

It provide styles only for icon element based on input node.

```scss
.b-option_switch {
	// ...
	&-input {
		@include g-radio(_input);
	}

	&-icon {
		@include g-radio(_icon);

		.b-option_switch-input:active + & {
			@include g-radio(_icon, m-active);
		}

		.b-option_switch-input:hover + & {
			@include g-radio(_icon, m-hover);
		}

		.b-option_switch-input:checked + & {
			@include g-radio(_icon, m-checked);
		}

		.b-option_switch-input[disabled] + & {
			@include g-radio(_icon, m-disabled);
		}
	}
}
```
*/
/*md

# g-checkbox

This component allows user to choose between two mutually exclusive state (checked or unchecked).

## Usage

A `g-checkbox` is used for select or unselect action items.

It is always tied to `<label>` that describes two opposite states.

The component usually points to choose settings or preferences.

`g-checkbox` has states (unchecked, checked, hover, disabled and invalid).

## Unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-1" />
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-1">Title</label>
</div>
```

## Checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-2" checked/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-2">Title</label>
</div>
```

## Disabled unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-3" disabled/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-3">Title</label>
</div>
```

## Disabled checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-4" checked disabled/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-4">Title</label>
</div>
```

## Invalid unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-5"/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-5">Title</label>
</div>
```

## Invalid checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-6" checked/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-6">Title</label>
</div>

```

## Required checkbox
```html_example
<div class="b-checkbox">
	<input type="checkbox" class="b-checkbox-input" id="checkox1">
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path stroke="currentColor" d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<span class="b-form_section-required">*</span>
	<label class="b-form_section-label" for="checkox1">
		By signing up, you agree to <a href="#" target="_blank" class="b-form_section-link">Privacy and Cookie Policies</a>
	</label>
</div>
```

## Customization by SCSS

Checkbox styles that used in several component.

Designed to use same style of checkbox in different components without additional CSS class.
ex: `b-checkbox`, `b-refinement_checkbox`, `b-account_preference` etc.

It provide styles only for icon element based on SVG.

```scss
.b-refinement_checkbox {
	// ...
	&-icon {
		@include g-checkbox(_icon);

		.b-refinement_checkbox:active & {
			@include g-checkbox(_icon, m-active);
		}

		.b-refinement_checkbox.m-checked & {
			@include g-checkbox(_icon, m-checked);
		}

		.b-refinement_checkbox.m-disabled & {
			@include g-checkbox(_icon, m-disabled);
		}
	}
}
```
*/
/*md

# g-spinner

Global spinner component applied to different blocks that fetch data.

Designed to use same style of spinner in different components and on particular breakpoints.
Ex: b-minicart_popup, b-suggestions, b-plp_grid, b-product_details, b-cart etc.

```scss
.b-product_gallery {
	&.m-loading_long::before {
		@include g-spinner();
	}
	// ...
}
```
*/
/*md

# g-link

Designed to provide same styles of text-type links across different components.
For g-button with arrow icon please use next .isml templates:
<isinclude template="/common/icons/standalone/arrow-right" />
<isinclude template="/common/icons/standalone/arrow-left" />

There are some predefined parameters:
	$_mode: default,   // link variations
	$_type: primary,   // type
	$_font_size: 14px  //font size ( by default 14px )

## Usage

## Default link type

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<a href="#" class="b-link [modifier class]">
	I am a link
</a>
```

##  Primary link 1

```html_example
<!--
Classes:
.m-type_regular_underline - Regular underline
.m-type_regular - Regular
.m-type_light - Light
.m-type_regular_underline.m-big - Regular underline, big
.m-type_regular.m-big - Regular, big
-->
<a href="#" class="b-link m-primary [modifier class]">
	I am a link
</a>
```


## Secondary link 1

```html_example
<!--
Classes:
.m-type_regular_medium - Medium
.m-type_light - Light
.m-type_regular_big - Big
.m-type_bold - Bold
-->
<a href="#" class="b-link m-secondary [modifier class]">
	I am a link
</a>
```

## Icon link type

```html_example
<a href="#" class="b-link m-primary m-type_regular m-big m-icon">
	I am a link
	<svg viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M-7.32137e-07 3.93182L-7.81809e-07 5.06818L12.861 5.06818L9.79724 8.19318L10.5882 9L15 4.5L10.5882 7.6083e-07L9.79724 0.806819L12.861 3.93182L-7.32137e-07 3.93182Z" fill="currentColor"/>
	</svg>
</a>
```
*/
/*md

# g-link_hamburger

Hamburger menu generic link that used in several component.

Designed to use same style of hamburger link in different components
ex: menu, account link, language switcher etc.

```scss
.b-menu {
	// ...
	&-item {
		@include media(sm) {
			@include g-link_hamburger;
		}
	}
}
```
*/
/*md

# g-image_container

This is global component designed to hold image in place and preventing from layout bouncing during page load.

It based on `padding-bottom` trick. `padding-bottom` and `padding-top` relative units are based
on parent element `width`. So if you had an element that is 500px wide, and padding-top of 100%,
the padding-top would be 500px. [More info](https://css-tricks.com/aspect-ratio-boxes/)

```scss
.b-suggestions-item_image {
	@include g-image_container(_container, 100%);

	img {
		@include g-image_container(_img);
	}
}

.b-suggestions-item_image {
	@include g-image_container(_container, 100%);

	img {
		@include g-image_container(_img);
	}
}
```

You could change aspect ration in mixin:

```scss
@include g-image_container(_container, 100%);   // 1:1
@include g-image_container(_container, 150%);   // 2:3
@include g-image_container(_container, 133%);   // 3:4
@include g-image_container(_container, 125%);   // 5:4
@include g-image_container(_container, 75%);    // 4:3
@include g-image_container(_container, 66.6%);  // 3:2
@include g-image_container(_container, 56.25%); // 16:9
```

But it is preferable to define only one aspect ration through all images and not change it.

*/
/*md

# g-snap_scroll

Components that apply snap scroll CSS rules to different components and cases.

Designed to use same snap scroll functionality in different components and/or on
particular breakpoints.
Ex: b-carousel, b-product_gallery, .b-product_slider etc.

```scss
.b-product_gallery {
	&-thumbs_track {
		@include g-snap_scroll($direction: y);
	}
	// ...
}
```

[Snap scroll MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)

*/
/*md

# g-backdrop_panel

Backdrop (overlay) for panels designed to handle swipe-to-close animation.

Serve as regular overlay.

```scss
.b-menu_panel {
	@include media(sm) {
		@include g-backdrop_dialog;
	}
	// ...
}
```
*/
/*md

# g-dialog_backdrop

Dialog window backdrop styles that used in several component.

Designed to use same style of backdrop and logic in different components and on particular breakpoints.
Ex: b-dialog, b-menu_panel, b-refinements_panel, b-minicart_panel etc.

```scss
.b-menu_panel {
	@include media(sm) {
		@include g-dialog_backdrop;
	}
	// ...
}
```
*/
/*md

# g-section_holder

This is global component designed to hold some standalone section of the site
as it wrapped into main container.

It could be used not only for standalone blocks, but also for page layouts.

```scss
.b-section {
	background: green;

	&-inner {
		@include g-section_holder;
	}
}
```
*/
/*md

# g-section_holder_fullbleed

Since header is differs from other container (g-section_holder)
we need special component the same as `section_holder` but with different
`max-width` and `margin`s.

This is global component designed to hold header of the site as it wrapped into
main container.

This common designs it could be removed and changed to `section_holder`.

```scss
.l-header-inner {
	background: green;

	&-inner {
		@include g-section_holder_fullbleed;
	}
}
```
*/
/*md

# g-grid

Grid layout component based on CSS grid.

It is designed to easy use project defined grid into components where CSS grid is
applicable.

```scss
.b-grid {
	@include g-grid();

	.b-columns__item {
		@include media(lg-up) {
			grid-column: 2 / span 4;
			grid-row: 1 / 2;
		}

		@include media(md-down) {
			grid-column: grid-start / span 7;
		}
	}
}
```
*/
/*md

# g-select

Designed to provide same styles of select across different components.

*/
.g-recaptcha {
  position: relative;
  z-index: 5;
}
.g-recaptcha .grecaptcha-badge {
  width: 70px !important;
  bottom: 20px !important;
  right: 0 !important;
  left: 0;
  transform: scale(0.7);
  transform-origin: 0 bottom;
  transition: width 0.3s ease 0s !important;
}
@media screen and (max-width: 1023px) {
  .g-recaptcha .grecaptcha-badge.grecaptcha-badge {
    overflow: hidden;
    box-shadow: grey 0px 0px 5px;
    visibility: visible !important;
  }
}
.g-recaptcha .grecaptcha-badge:hover {
  width: 256px !important;
}
.b-consent_tracking_visible .g-recaptcha .grecaptcha-badge {
  bottom: 155px !important;
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible .g-recaptcha .grecaptcha-badge {
    bottom: 90px !important;
  }
}

.ie-div-position-customer-chat .button-iframe-wrap {
  z-index: 5;
}
.ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 20px;
  right: 10px;
}
@media screen and (min-width: 768px) {
  .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    right: 30px;
  }
}
@media screen and (max-width: 1023px) {
  .b-buy_bar_float .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 90px;
  }
}
.b-consent_tracking_visible .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat, .b-buy_bar_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 90px;
}
.b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 110px;
}
@media screen and (max-width: 1023px) {
  .b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 130px;
  }
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible.b-buy_bar_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 165px;
  }
}
.b-consent_tracking_visible.b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 265px;
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible.b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 185px;
  }
}
@media screen and (max-width: 1023px) {
  .b-consent_tracking_visible .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 150px;
  }
}
@media screen and (max-width: 1023px) {
  .b-consent_tracking_visible.b-buy_bar_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat, .b-consent_tracking_visible.b-buy_bar_float .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 220px;
  }
}
@media screen and (min-width: 1024px) {
  .l-page-checkout .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 80px;
  }
}
.b-consent_tracking_visible.l-page-checkout .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 155px;
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible.l-page-checkout .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 165px;
  }
}
.ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 90px;
  height: calc(100% - 110px);
}
.b-consent_tracking_visible .ie-div-position-customer-chat .chat-iframe-wrap, .b-buy_bar_stucks .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 160px;
  height: calc(100% - 185px);
}
.b-proceed_stucks .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 180px;
  height: calc(100% - 200px);
}
.b-consent_tracking_visible.b-proceed_stucks .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 255px;
  height: calc(100% - 270px);
}
.l-page-checkout .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 150px;
  height: calc(100% - 170px);
}
.b-consent_tracking_visible.b-buy_bar_stucks .ie-div-position-customer-chat .chat-iframe-wrap, .b-consent_tracking_visible.l-page-checkout .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 235px;
  height: calc(100% - 255px);
}

.g-header_privacy {
  color: #fff;
}
.b-header_stuck .g-header_privacy {
  display: none;
}
.l-header:hover .g-header_privacy {
  background-color: #000;
}
.g-header_privacy-outer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 14px;
}
@media screen and (max-width: 1023px) {
  .g-header_privacy-outer {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    align-items: flex-start;
    padding: 8px 14px 6px;
  }
}
@media screen and (min-width: 768px) {
  .g-header_privacy-outer div {
    flex-grow: 1;
    text-align: center;
  }
}
.g-header_privacy-outer.onetimenotice-hide {
  display: none;
}
.g-header_privacy-close {
  color: #fff;
  display: table;
  height: 13px;
  width: 13px;
}
@media screen and (max-width: 1023px) {
  .g-header_privacy-close {
    height: 10px;
    width: 10px;
  }
}
.g-header_privacy-close:hover {
  opacity: 0.8;
}
.g-header_privacy-close svg {
  fill: currentColor;
  max-width: 100%;
}

/*md

# g-cols

Columns layout component based on flex.
It used to make 'columns grid' layout or simple symmetrical grid.
Each column do not know about other columns nor what part of grid it is.
So it is not real grid, but more like columns.
With this component you could not achieve vertical grid layout or asymmetrical grid.

For more grid possibilities see g-grid.

This implementation try to address as more browsers as possible.
That is why we use `width` instead of `flex-basis`.

```scss
.b-columns {
	@include g-cols();

	.b-columns-item {
		@include g-cols(item, $takes: 3);

		@include media(md) {
			@include g-cols(item, $takes: 6, $from: grid-columns(md), $gutter: grid-gutter(md));
		}

		@include media(sm) {
			@include g-cols(item, $takes: 6, $from: grid-columns(sm), $gutter: grid-gutter(sm));
		}
	}
}
```
*/
/*md

# Line grids

This is equal line grid implementation familiar to you by many "grid" frameworks of second part of 2010 CSS-era.

This is just example of implementation g-cols on flex possibilities.
Since we finally have great CSS API for grids you can use raw `flex` or `grid` properties in your CSS.

In Boilerplate we advice you to use grid in all possible CSS layout and different real-life cases. Ex:
flex, grid, columns, table, float, as just width on any sub-component.

**Headsup!**

This grid use negative margins, so you can't use it without wrapper. Otherwise you end up with horizontal scroll.

In this documentation not covered:

We don't implement one side gutter grid example because we don't see real cases that required this approach and you don't need to worry what column is last.
This is split (both sides) gutter columns.

Also we do not implement compound grids since they are not wide used and could be implemented as semantic type.
See [details](http://pointnorth.io/#grids)

* static
* adaptive grid (absolute value grid number-to-breakpoint spaces on sides), responsive grid, hybrid grid
* fluid gutter
* ofsetting columns
* aligment without push-pull
* auto placement
* islands, gallery example
* Line break on particular breakpoint

Could be covered (TODO):

* margin padding example
* mixed component layout example
* not direct structure columns (just get width and apply legacy layout solutions)
* semantic nested grid with columns total resetting
* semantic asymetrical grid with item position

## Semantic grid

Semantic grid mostly used for:

* cases where you don't have access to HTML
* *accessing to control* grid on different states (mostly breakpoints). In other words for complex layouts.

If you bring classes to markup you bring new "semantic" for it.
If you name grid like `quarter` or `half` you expected to see this and not quarter of half on mobile.

This is bad idea to make "responsive classes" because you ended up with too many modifications without access points.

### Responsive 3@lg 6@md 6/6@sm

With this configuration you can achieve simple 4 items on desktop, 2 item on tabled and 1 item on mobile.

Note that you need to have same multiplicity rate through all breakpoints.
Ex: 5-3-1 or 4-2-1, but not 4-3-1. Last items don't have the same width, align.

```html_example
<div class="b-grid m-example-a">
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
</div>
```

```scss
.b-grid.m-example-a {
	@include g-cols;

	.b-grid-item {
		@include g-cols(item, $takes: 3);

		@include media(md) {
			@include g-cols(item, $takes: 6, $from: grid-columns(md), $gutter: grid-gutter(md));
		}

		@include media(sm) {
			@include g-cols(item, $takes: 6, $from: grid-columns(sm), $gutter: grid-gutter(sm));
		}
	}
}
```

### Responsive 3-3-6@lg 8-4@md 6-6@sm

The other semantic grid example that has layout of 3-3-6 columns spans on large breakpoint, 8-4 on medium and 6-6 on small.

```html_example
<div class="b-grid m-example-b">
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
	<div class="b-grid-item"><span>Item</span></div>
</div>
```

### Project defined grid based on flex

This is example how to use project defined grid with `grid-span()` based on flex
possibilities.

* Desktop: 12 cols, gutter 20px
* Tablet: 12 cols, gutter 16px
* Mobile: 6 cols, gutter 9px

```html_example
<div class="l-cols_responsive l-cols">
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>

	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>

	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>

	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
</div>
```

```scss
.l-cols_responsive {
	display: flex;
	flex-wrap: wrap;

	&-item {
		max-width: grid-span(1);
		width: grid-span(1);

		@include media(md) {
			max-width: grid-span(1, md);
			width: grid-span(1, md);
		}

		@include media(sm) {
			max-width: grid-span(1, sm);
			width: grid-span(1, sm);
		}
	}
}
```

### Project defined grid based on grid

```scss
.l-cols_responsive {
	@include g-grid;

	&-item {
		grid-column: 1 / 2;
	}
}
```

### Project defined grid based on mixed layout

```scss
.l-component {
	@include g-grid;

	&-item_a {
		grid-column: grid-start / span 4;
	}

	&-item_b {
		grid-column: 5 / grid-end;
	}
}

// Component inside item-a

.b-some {
	display: flex;

	&-aside {
		flex-basis: grid-span(1);
	}

	&-main {
		flex-basis: grid-span(3);
	}
}

```

### Custom responsive grid in place

Custom grid could be easily developed using `g-cols` element. To do this you need
to fill all function signature.

For example if you need 10 columns grid on large, 12 on medium and 3 columns on small
with some custom gutters, you could do:

```scss
.b-component {
	@include g-cols;

	&-aside {
		@include g-cols(item, $takes: 5, $from: 10, $gutter: 10px);

		@include media(md) {
			@include g-cols(item, $takes: 8, $from: 12, $gutter: 16px);
		}

		@include media(lg) {
			@include g-cols(item, $takes: 1, $from: 3, $gutter: 5px);
		}
	}
}
```

## Non semantic (HTML) grid

Used to make special 'one purpose' layout elements that serves as container without single line of CSS code.

This approach is mostly used to create grid components for prototyping or content management needs.

Downsides of this approach is reduced flexibility and many wrappers over components.
You cannot achieve,
passing sizes from flex context to element,
work with indirect children,
create custom grid in place,
entry to layout properties like border from component,
etc.
Also this approach could not solve some real-life cases a-priory due to strict structural limiation and static nature of css classes.

### Gutter position: padding / margin

In real life we need flexibility to change gutter position from margin to padding to achieve different tasks.

* With margin implementation you cannot add border as divider beside items. You can only use whitespace to separate items. You can use complex grids since they margins will collapse.
* With padding implementation you cannot separate items that based on *background*, but you can use borders for separating components.

You could faced with some inconsistency (+/-1px) due to calculation rounding. IE family historically round subpixels up, FF, webkit family down.

Symmetrical test

```html_example
<div class="l-cols">
	<div class="l-cols-item l-cols-item_12_m"><span class="l-cols-box">Column 12</span></div>
	<div class="l-cols-item l-cols-item_12_p"><span class="l-cols-box">Column 12</span></div>

	<div class="l-cols-item l-cols-item_6_m"><span class="l-cols-box">Column 6</span></div>
	<div class="l-cols-item l-cols-item_6_m"><span class="l-cols-box">Column 6</span></div>

	<div class="l-cols-item l-cols-item_6_p"><span class="l-cols-box">Column 6</span></div>
	<div class="l-cols-item l-cols-item_6_p"><span class="l-cols-box">Column 6</span></div>

	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>

	<div class="l-cols-item l-cols-item_4_p"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_p"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_p"><span class="l-cols-box">Column 4</span></div>

	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">Column 3</span></div>

	<div class="l-cols-item l-cols-item_3_p"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_p"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_p"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_p"><span class="l-cols-box">Column 3</span></div>

	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>

	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>

	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>

	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
</div>
```

Asymmetrical test

```html_example
<div class="l-cols">
	<div class="l-cols-item l-cols-item_1_m"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_11_m"><span class="l-cols-box">Column 11</span></div>

	<div class="l-cols-item l-cols-item_1_p"><span class="l-cols-box">Column 1</span></div>
	<div class="l-cols-item l-cols-item_11_p"><span class="l-cols-box">Column 11</span></div>

	<div class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_10_m"><span class="l-cols-box">Column 10</span></div>

	<div class="l-cols-item l-cols-item_2_p"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_10_p"><span class="l-cols-box">Column 10</span></div>

	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_9_m"><span class="l-cols-box">Column 9</span></div>

	<div class="l-cols-item l-cols-item_3_p"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_9_p"><span class="l-cols-box">Column 9</span></div>

	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_8_m"><span class="l-cols-box">Column 8</span></div>

	<div class="l-cols-item l-cols-item_4_p"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_8_p"><span class="l-cols-box">Column 8</span></div>

	<div class="l-cols-item l-cols-item_5_m"><span class="l-cols-box">Column 5</span></div>
	<div class="l-cols-item l-cols-item_7_m"><span class="l-cols-box">Column 7</span></div>
</div>
<div class="l-cols">
	<div class="l-cols-item l-cols-item_5_p"><span class="l-cols-box">Column 5</span></div>
	<div class="l-cols-item l-cols-item_7_p"><span class="l-cols-box">Column 7</span></div>
</div>
```

### Static gutter (with different "grid margin" ("grid offset"))

To achieve typographic effects we need to use static gutters, because whitespace is constant value in real applications.

#### Different static gutter depending on screen resolution

* Desktop: 12 cols, gutter 40px, offset 40px
* Tablet: 6 cols, gutter 30px, offset 36px
* Mobile: 2 cols, gutter 20px, offset 25px

```html_example
<div class="l-cols_responsive-wr">
	<div class="l-cols_responsive l-cols">
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>

		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>

		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>

		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
		<div class="l-cols_responsive-item l-cols-item"><span class="l-cols-box">Column</span></div>
	</div>
</div>
```

### Without gutter

Sometimes it is necessary to skip gutter and make it in contained element. For example if we include component that already have one, component with fullwidth image or background.

```html_example
<div class="l-cols m-gutter-0">
	<div class="l-cols-item l-cols-item_2_g0"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_g0"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_g0"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_g0"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_g0"><span class="l-cols-box">Column 2</span></div>
	<div class="l-cols-item l-cols-item_2_g0"><span class="l-cols-box">Column 2</span></div>
</div>
<div class="l-cols m-gutter-0">
	<div class="l-cols-item l-cols-item_3_g0"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_g0"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_g0"><span class="l-cols-box">Column 3</span></div>
	<div class="l-cols-item l-cols-item_3_g0"><span class="l-cols-box">Column 3</span></div>
</div>
<div class="l-cols m-gutter-0">
	<div class="l-cols-item l-cols-item_4_g0"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_g0"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_g0"><span class="l-cols-box">Column 4</span></div>
</div>
<div class="l-cols m-gutter-0">
	<div class="l-cols-item l-cols-item_6_g0"><span class="l-cols-box">Column 6</span></div>
	<div class="l-cols-item l-cols-item_6_g0"><span class="l-cols-box">Column 6</span></div>
</div>
<div class="l-cols m-gutter-0">
	<div class="l-cols-item l-cols-item_12_g0"><span class="l-cols-box">Column 12</span></div>
</div>
```

### Mixed grids with mixed margin/padding for gutters

Since we don't change columns total we need to think for each nested element in terms of generic columns.

```html_example
<div class="l-cols">
	<div class="l-cols-item l-cols-item_8_m">
		<span class="l-cols-box">Take 8 Margin</span>

		<div class="l-cols">
			<div class="l-cols-item l-cols-item_6_p">
				<span class="l-cols-box">Take 6 Padding</span>

				<div class="l-cols">
					<div class="l-cols-item l-cols-item_3_p">
						<span class="l-cols-box">Take 3 Padding</span>
					</div>
					<div class="l-cols-item l-cols-item_9_p">
						<span class="l-cols-box">Take 9 Padding</span>

						<div class="l-cols">
							<div class="l-cols-item l-cols-item_4_p">
								<span class="l-cols-box">Take 4 Padding</span>
							</div>
							<div class="l-cols-item l-cols-item_8_p">
								<span class="l-cols-box">Take 8 Padding</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="l-cols-item l-cols-item_6_m">
				<span class="l-cols-box">Take 6 Margin</span>
			</div>
		</div>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Take 4 Margin</span>
		<div class="l-cols">
			<div class="l-cols-item l-cols-item_6_m">
				<span class="l-cols-box">Take 6 Margin</span>
			</div>
			<div class="l-cols-item l-cols-item_6_m">
				<span class="l-cols-box">Take 6 Margin</span>
				<div class="l-cols">
					<div class="l-cols-item l-cols-item_6_m">
						<span class="l-cols-box">Take 6 Margin</span>
					</div>
					<div class="l-cols-item l-cols-item_6_m">
						<span class="l-cols-box">Take 6 Margin</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
```

### Gutter examples

#### Divided horizontal

```html_example
<div class="l-span l-span_divided-horizontal">
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
</div>
```

#### Divided vertical

```html_example
<div class="l-span l-span_divided-vertical">
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
</div>
```

#### Celled

```html_example
<div class="l-span l-span_celled">
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
	<div class="l-span-item"><span class="l-span-box">Column 3</span></div>
</div>
```

#### Alignment item without push-pull

##### Start

```html_example
<div class="l-cols" style="justify-content: flex-start">
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
</div>
```

##### End

```html_example
<div class="l-cols" style="justify-content: flex-end">
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
</div>
```

##### Asides

```html_example
<div class="l-cols" style="justify-content: space-between">
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
</div>
```

##### Center

```html_example
<div class="l-cols" style="justify-content: center">
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
	<div class="l-cols-item l-cols-item_4_m"><span class="l-cols-box">Column 4</span></div>
</div>
```

But, note: if you need to align to grid center in even grids positioning should not use odd values and v.c.. Ex.:

```html_example
<div class="l-cols" style="justify-content: center">
	<div class="l-cols-item l-cols-item_5_m"><span class="l-cols-box">Column 5</span></div>
</div>
```

To fix this, just add one push or pull:

```html_example
<div class="l-cols" style="justify-content: center">
	<div class="l-cols-item l-cols-item_5_m l-cols-item_push_1_m"><span class="l-cols-box">Column 5 push 1</span></div>
</div>
```

### Vertical alignment

With flex you can achieve most advanced possibilities that flexbox specification is provide. All this example is just added `align-items` and `align-self` property.

#### Middle

```html_example
<div class="l-cols m-va-middle m-without-bg">
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align middle</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align middle <br /> Align middle</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align middle</span>
	</div>
</div>
```

#### Bottom

```html_example
<div class="l-cols m-va-bottom m-without-bg">
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align bottom</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align bottom <br /> Align bottom</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align bottom</span>
	</div>
</div>
```

#### Stretch

```html_example
<div class="l-cols l-cols_va-stretch m-without-bg">
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align stretch</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align stretch <br /> Align stretch</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align stretch</span>
	</div>
</div>
```

#### Baseline

```html_example
<div class="l-cols m-va-baseline m-without-bg">
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box">Align baseline</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box" style="font-size: 2rem; line-height: 2.5rem;">Align baseline</span>
	</div>
	<div class="l-cols-item l-cols-item_4_m">
		<span class="l-cols-box" style="font-size: 1.25rem; line-height: 3rem;">Align baseline</span>
	</div>
</div>
```

#### Align each item separately

```html_example
<div class="l-cols m-without-bg">
	<div class="l-cols-item l-cols-item_3_m l-cols-item_va_b">
		<span class="l-cols-box">Align bottom</span>
	</div>
	<div class="l-cols-item l-cols-item_3_m l-cols-item_va_c">
		<span class="l-cols-box">Align center</span>
	</div>
	<div class="l-cols-item l-cols-item_3_m l-cols-item_va_t">
		<span class="l-cols-box">Align top</span>
	</div>
	<div class="l-cols-item l-cols-item_3_m">
		<span class="l-cols-box">Item <br /> item</span>
	</div>
</div>
```

### Reordering

With flexbox you can reorder columns.

For example reasons this style is added as inline styles. But on real project you need to add this to semantic bindings.

```html_example
<div class="l-cols">
	<div style="order: 6;" class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">A</span></div>
	<div style="order: 2;" class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">B</span></div>
	<div style="order: 3;" class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">C</span></div>
	<div style="order: 5;" class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">D</span></div>
	<div style="order: 4;" class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">E</span></div>
	<div style="order: 1;" class="l-cols-item l-cols-item_2_m"><span class="l-cols-box">F</span></div>
</div>
```

Reverse order

```html_example
<div class="l-cols" style="flex-direction: row-reverse;">
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">A</span></div>
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">B</span></div>
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">C</span></div>
	<div class="l-cols-item l-cols-item_3_m"><span class="l-cols-box">D</span></div>
</div>
```

### RTL

Since we use flexbox we can achieve full support of Right-to-Left right out of the box. You just need to add `dir="rtl"`.

```html_example
<div dir="rtl">
	<div class="l-cols">
		<div class="l-cols-item l-cols-item_5_m"><span class="l-cols-box">1. Column 5</span></div>
		<div class="l-cols-item l-cols-item_7_m"><span class="l-cols-box">2. Column 7</span></div>
	</div>
	<div class="l-cols">
		<div class="l-cols-item l-cols-item_5_p"><span class="l-cols-box">3. Column 5</span></div>
		<div class="l-cols-item l-cols-item_7_p"><span class="l-cols-box">4. Column 7</span></div>
	</div>
</div>
```

*/
.b-grid {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 8px, transparent 8px, transparent calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) 8.3333333333%);
  background-size: 20px 20px, 1px 40px, 100% 1px;
  padding-bottom: 20px;
  padding-top: 20px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-grid {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 8px, transparent 8px, transparent calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) 8.3333333333%);
    background-size: 20px 20px, 1px 40px, 100% 1px;
  }
}
@media screen and (max-width: 767px) {
  .b-grid {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 4.5px, transparent 4.5px, transparent calc(16.6666666667% - 4.5px), rgba(135, 206, 235, 0.3) calc(16.6666666667% - 4.5px), rgba(135, 206, 235, 0.3) 16.6666666667%);
    background-size: 20px 20px, 1px 40px, 100% 1px;
  }
}
.b-grid-item {
  background: #c3ddb6;
  outline: 1px solid cyan;
  overflow: hidden;
  text-align: center;
  text-align: center;
}
.b-grid-item > span {
  background-color: #a0c4e8;
  display: block;
  overflow: hidden;
}

.b-grid.m-example-a {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.b-grid.m-example-a .b-grid-item {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 25%;
  width: 25%;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-grid.m-example-a .b-grid-item {
    box-sizing: border-box;
    flex: 1 0 auto;
    padding: 8px;
    max-width: 50%;
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .b-grid.m-example-a .b-grid-item {
    box-sizing: border-box;
    flex: 1 0 auto;
    padding: 4.5px;
    max-width: 100%;
    width: 100%;
  }
}

.b-grid.m-example-b {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.b-grid.m-example-b .b-grid-item {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 50%;
  width: 50%;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-grid.m-example-b .b-grid-item {
    box-sizing: border-box;
    flex: 1 0 auto;
    padding: 8px;
    max-width: 66.6666666667%;
    width: 66.6666666667%;
  }
  .b-grid.m-example-b .b-grid-item:nth-child(2n) {
    box-sizing: border-box;
    flex: 1 0 auto;
    padding: 8px;
    max-width: 33.3333333333%;
    width: 33.3333333333%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-grid.m-example-b .b-grid-item {
    box-sizing: border-box;
    flex: 1 0 auto;
    padding: 8px;
    max-width: 25%;
    width: 25%;
  }
  .b-grid.m-example-b .b-grid-item:nth-child(3n) {
    box-sizing: border-box;
    flex: 1 0 auto;
    padding: 8px;
    max-width: 50%;
    width: 50%;
  }
}

.l-cols_responsive {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 8px, transparent 8px, transparent calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) 8.3333333333%);
  background-size: 20px 20px, 1px 40px, 100% 1px;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
  padding-top: 20px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-cols_responsive {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 8px, transparent 8px, transparent calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) 8.3333333333%);
    background-size: 20px 20px, 1px 40px, 100% 1px;
  }
}
@media screen and (max-width: 767px) {
  .l-cols_responsive {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 4.5px, transparent 4.5px, transparent calc(16.6666666667% - 4.5px), rgba(135, 206, 235, 0.3) calc(16.6666666667% - 4.5px), rgba(135, 206, 235, 0.3) 16.6666666667%);
    background-size: 20px 20px, 1px 40px, 100% 1px;
  }
}
.l-cols_responsive-item {
  background: #c3ddb6;
  outline: 1px solid cyan;
  overflow: hidden;
  text-align: center;
  max-width: 8.3333333333%;
  width: 8.3333333333%;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-cols_responsive-item {
    max-width: 8.3333333333%;
    width: 8.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .l-cols_responsive-item {
    max-width: 16.6666666667%;
    width: 16.6666666667%;
  }
}

.l-cols {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
  background-color: #f7cb9c;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 105, 180, 0.4) 1px, transparent 1px), repeating-linear-gradient(to right, rgba(135, 206, 235, 0.3) 0, rgba(135, 206, 235, 0.3) 8px, transparent 8px, transparent calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) calc(8.3333333333% - 8px), rgba(135, 206, 235, 0.3) 8.3333333333%);
  background-size: 20px 20px, 1px 40px, 100% 1px;
}
.l-cols.m-gutter-0 {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0;
}
.l-cols.m-va-middle {
  align-items: center;
}
.l-cols.m-va-bottom {
  align-items: flex-end;
}
.l-cols.m-va-top {
  align-items: flex-start;
}
.l-cols.m-va-baseline {
  align-items: baseline;
}
.l-cols.m-without-bg {
  background-color: transparent;
}
.l-cols.m-without-bg .l-cols-item {
  background-color: #a0c4e8;
}
.l-cols-item {
  background: #c3ddb6;
  outline: 1px solid cyan;
  overflow: hidden;
  text-align: center;
}
.l-cols-box {
  background-color: #a0c4e8;
  display: block;
  overflow: hidden;
}

.l-cols-item_1_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(8.3333333333% - 16px);
  width: calc(8.3333333333% - 16px);
}

.l-cols-item_1_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 8.3333333333%;
  width: 8.3333333333%;
}

.l-cols-item_2_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(16.6666666667% - 16px);
  width: calc(16.6666666667% - 16px);
}

.l-cols-item_2_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 16.6666666667%;
  width: 16.6666666667%;
}

.l-cols-item_3_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(25% - 16px);
  width: calc(25% - 16px);
}

.l-cols-item_3_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 25%;
  width: 25%;
}

.l-cols-item_4_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(33.3333333333% - 16px);
  width: calc(33.3333333333% - 16px);
}

.l-cols-item_4_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 33.3333333333%;
  width: 33.3333333333%;
}

.l-cols-item_5_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(41.6666666667% - 16px);
  width: calc(41.6666666667% - 16px);
}

.l-cols-item_5_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 41.6666666667%;
  width: 41.6666666667%;
}

.l-cols-item_6_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(50% - 16px);
  width: calc(50% - 16px);
}

.l-cols-item_6_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 50%;
  width: 50%;
}

.l-cols-item_7_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(58.3333333333% - 16px);
  width: calc(58.3333333333% - 16px);
}

.l-cols-item_7_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 58.3333333333%;
  width: 58.3333333333%;
}

.l-cols-item_8_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(66.6666666667% - 16px);
  width: calc(66.6666666667% - 16px);
}

.l-cols-item_8_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 66.6666666667%;
  width: 66.6666666667%;
}

.l-cols-item_9_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(75% - 16px);
  width: calc(75% - 16px);
}

.l-cols-item_9_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 75%;
  width: 75%;
}

.l-cols-item_10_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(83.3333333333% - 16px);
  width: calc(83.3333333333% - 16px);
}

.l-cols-item_10_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 83.3333333333%;
  width: 83.3333333333%;
}

.l-cols-item_11_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(91.6666666667% - 16px);
  width: calc(91.6666666667% - 16px);
}

.l-cols-item_11_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 91.6666666667%;
  width: 91.6666666667%;
}

.l-cols-item_12_m {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 8px;
  max-width: calc(100% - 16px);
  width: calc(100% - 16px);
}

.l-cols-item_12_p {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 100%;
  width: 100%;
}

.l-cols-item_1_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 8.3333333333%;
  width: 8.3333333333%;
}

.l-cols-item_2_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 16.6666666667%;
  width: 16.6666666667%;
}

.l-cols-item_3_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 25%;
  width: 25%;
}

.l-cols-item_4_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 33.3333333333%;
  width: 33.3333333333%;
}

.l-cols-item_5_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 41.6666666667%;
  width: 41.6666666667%;
}

.l-cols-item_6_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 50%;
  width: 50%;
}

.l-cols-item_7_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 58.3333333333%;
  width: 58.3333333333%;
}

.l-cols-item_8_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 66.6666666667%;
  width: 66.6666666667%;
}

.l-cols-item_9_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 75%;
  width: 75%;
}

.l-cols-item_10_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 83.3333333333%;
  width: 83.3333333333%;
}

.l-cols-item_11_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 91.6666666667%;
  width: 91.6666666667%;
}

.l-cols-item_12_g0 {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

.l-cols-item_auto {
  max-width: initial;
}

.l-cols-item_va_b {
  align-self: flex-end;
}

.l-cols-item_va_t {
  align-self: flex-start;
}

.l-cols-item_va_c {
  align-self: center;
}

.l-span {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.l-span-item {
  box-sizing: border-box;
  flex: 1 0 auto;
  padding: 8px;
  max-width: 25%;
  width: 25%;
}
.l-span-item > span {
  display: block;
  overflow: hidden;
  text-align: center;
}

.l-span_celled .l-span-item {
  box-shadow: 0 -1px 0 0 #d9d9d9, -1px 0 0 0 #d9d9d9;
}
.l-span_celled .l-span-item:nth-child(2), .l-span_celled .l-span-item:nth-child(3), .l-span_celled .l-span-item:nth-child(4) {
  box-shadow: -1px 0 0 0 #d9d9d9;
}
.l-span_celled .l-span-item:first-child, .l-span_celled .l-span-item:nth-child(4n+1) {
  box-shadow: 0 -1px 0 0 #d9d9d9;
}
.l-span_celled .l-span-item:first-child {
  box-shadow: none;
}

.l-span_divided-horizontal .l-span-item {
  box-shadow: 0 -1px 0 0 #d9d9d9;
}
.l-span_divided-horizontal .l-span-item:first-child, .l-span_divided-horizontal .l-span-item:nth-child(2), .l-span_divided-horizontal .l-span-item:nth-child(3), .l-span_divided-horizontal .l-span-item:nth-child(4) {
  box-shadow: none;
}

.l-span_divided-vertical .l-span-item {
  box-shadow: -1px 0 0 0 #d9d9d9;
}
.l-span_divided-vertical .l-span-item:first-child, .l-span_divided-vertical .l-span-item:nth-child(4n+1) {
  box-shadow: none;
}

.l-example_container {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  margin-bottom: 80px;
  margin-top: 80px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-example_container {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .l-example_container {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.l-example_container.m-full {
  padding: 0;
}

.b-icons_example {
  align-items: baseline;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style: none;
  margin-bottom: 3em;
  text-align: center;
}
.b-icons_example-item {
  position: relative;
}
.b-icons_example-item svg {
  display: block;
  margin: auto;
}
.b-icons_example-item p {
  margin: 1em 0 0;
}

.b-icons_guide-svg_mono {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%230068ff%22 d%3D%22M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
  cursor: pointer;
  height: 50px;
  width: 50px;
}
.b-icons_guide-svg_mono:hover {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23f95cce%22 d%3D%22M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
}
.b-icons_guide-svg_mono_image {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%230068ff%22 d%3D%22M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z%22%2F%3E%3C%2Fsvg%3E");
  cursor: pointer;
  height: 50px;
  width: 50px;
}
.b-icons_guide-svg_mono_image:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23f95cce%22 d%3D%22M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z%22%2F%3E%3C%2Fsvg%3E");
}
.b-icons_guide-svg_multi {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 width%3D%22160%22 height%3D%2262%22 class%3D%22m-large_logo%22 viewBox%3D%220 0 160 62%22%3E%3Cpath fill%3D%22currentColor%22 d%3D%22M30.7 58.14q-.06.15-.23.14h-4.6q-.18 0-.13-.17l.86-4.26.83-4.26q.04-.18.21-.18h1.17q.18 0 .13.18l-.85 4.26-.65 3.32c-.04.2.07.36.24.36h.93c.67 0 2.08-.28 2.08-.28.1-.02.2.01.17.13zm5.62-1.32a5 5 0 0 0-.14 1.29q.02.17-.18.17h-1.01q-.17 0-.16-.17c.01-.33 0-.57.14-1.14l.08-.31c.04-.15-.09-.2-.17-.06-.8 1.28-1.28 1.77-2.14 1.77-.97 0-1.24-.99-.97-2.2.16-.77.57-2.24.72-2.94.08-.37.05-.98.05-.98q0-.18.17-.18h1q.17 0 .15.18s-.02.67-.1 1.04c-.16.72-.52 2.05-.68 2.82-.21.96-.37 1.69-.02 1.69 1.06 0 2.4-3.1 2.66-4.34L36 52.1c0-.02.04-.12.12-.1l1.05.2c.1.01.12.03.08.2zm3.73 1.55q-.58.01-.99-.47c-.08-.1-.16-.13-.29 0l-.3.3a.3.3 0 0 1-.2.08h-.36q-.16 0-.1-.2l1.63-7.65c.1-.5.14-1.02.12-1.29q-.02-.17.18-.17h1q.17 0 .17.17a7 7 0 0 1-.17 1.3l-.55 2.46c-.03.1.05.15.13.04.47-.59.96-.96 1.67-.96 1.07 0 2 .76 1.5 3.14-.41 1.92-1.89 3.24-3.45 3.25m1.54-5.65c-.85 0-1.61 1.29-1.85 2.4l-.27 1.2c-.18.86.15 1.5.68 1.5.8 0 1.6-1.04 1.96-2.7.24-1.12.27-2.4-.52-2.4m7 .71q-.05.1-.16.12c-.11.02-.3-.38-.62-.38-.54 0-1.5 1.54-2 3.77l-.29 1.33c0 .01-.04.12-.12.1l-1.04-.2c-.1-.02-.13-.03-.09-.21l.96-4.42c.1-.5.14-1.02.12-1.3q-.02-.17.18-.17h1.01q.17 0 .16.18c-.01.32.04.46-.1 1.03v.06c-.03.1.06.15.11.06.14-.2.18-.37.3-.53.5-.72 1.07-.89 1.71-.89q.26 0 .37.17.07.11.02.25zm2.5-.19-.82 3.73c-.13.59.1.87.41.87.08 0 .12 0 .1.1l-.06.23c-.03.1-.04.12-.13.12h-.61c-.81 0-1.23-.39-.95-1.7l.72-3.35c.08-.35.19-.99.19-.99q.04-.18.21-.18h1.04q.18 0 .13.18zm-.22-2.8c-.35 0-.63-.16-.53-.6.1-.52.64-.8 1.05-.8.34 0 .62.18.53.62-.1.52-.64.79-1.05.79m6 2.55c-.03.12-.13.17-.2.13a2.4 2.4 0 0 0-1.42-.46c-.75 0-1.51.86-1.87 2.5-.41 1.93.3 2.47.9 2.47.47 0 1.18-.3 1.64-.9.04-.04.1-.09.13-.04l.23.3q.03.05-.01.11a2.9 2.9 0 0 1-2.4 1.27c-1.37 0-2.35-.85-1.85-3.2.42-1.91 1.81-3.1 3.31-3.1h1.65q.17-.02.12.15zm5.06 4.1c-.08.35.08 1.02.08 1.02q.03.17-.14.17h-.88c-.12 0-.13-.01-.15-.13a2 2 0 0 1 .08-1.19c.03-.09-.05-.13-.1-.04-.54.9-1.25 1.45-2.01 1.45-1.18 0-2.1-.71-1.56-3.1.44-1.88 1.93-3.29 3.42-3.29 1.3 0 2.14.87 1.87 2.16zm-1.3-4.56c-.76 0-1.62 1.08-2 2.73-.26 1.13-.34 2.36.44 2.36S60.7 56.2 61 55.07l.16-.57c.32-1.17 0-1.97-.53-1.97m7.72 4.58c-.08.37-.05 1-.05 1q0 .17-.17.17h-1q-.17 0-.13-.17s.01-.67.1-1.04c.15-.72.5-2.06.66-2.82.21-.97.37-1.69.02-1.69-1.06 0-2.52 3.1-2.79 4.33l-.3 1.38c0 .01-.03.12-.11.1l-1.04-.2c-.1-.02-.13-.03-.1-.21l.95-4.42c.1-.5.16-1.02.13-1.3q0-.17.19-.17h1.01q.17 0 .16.18a6 6 0 0 1-.15 1.14l-.07.3c-.02.16.09.2.16.07.81-1.29 1.41-1.78 2.28-1.78.97 0 1.23 1 .97 2.2-.16.78-.57 2.22-.72 2.93m6.23-4.4q-.01.13-.17.12l-1.68-.03-.9 4.17c-.13.59.1.87.41.87h.33c.08 0 .1 0 .08.1l-.04.22q0 .14-.13.12h-.94c-.81 0-1.25-.38-.96-1.7l.82-3.78h-1.17a.1.1 0 0 1-.1-.14c.01-.07.05-.35.09-.44q.05-.14.17-.15h1.17l.3-1.37q0-.09.08-.1l1.17-.38q.19-.07.16.14l-.36 1.71h1.67q.12 0 .1.12zm8.13-2.32q-.07.18-.23.13c-.74-.42-1.31-.52-2-.52s-1.36.43-1.57 1.53c-.18.93.1 1.58.7 1.58h1.34c.11 0 .18.2.15.34s-.14.35-.28.35h-.89c-.7 0-1.63.83-1.85 1.93-.25 1.3.34 2 1.07 2 .83 0 1.6-.4 2.25-.98.04-.05.12-.05.15 0l.24.4q.05.07-.01.15a4 4 0 0 1-2.88 1.16c-1.98 0-2.75-1.15-2.45-2.69.17-.89.83-1.73 1.72-2.1.04-.01.07-.12.03-.13-.74-.39-1.04-1.19-.86-2.12.23-1.24 1.29-2 3.13-2h2.4c.1 0 .19.02.14.14zm4.19 8.94c-.35 1.6-1.12 2.2-2.13 2.2h-1.4c-.11 0-.23-.05-.18-.17l.25-.6q.1-.16.23-.1s.39.33.72.33c.5 0 .98-.58 1.16-1.4l.6-2.86c.03-.15-.07-.2-.15-.06-.81 1.29-1.25 1.72-2.12 1.72-.97 0-1.25-1-.98-2.22.16-.77.57-2.23.72-2.94.08-.37.05-.98.05-.98q0-.17.17-.17h1q.17 0 .15.17s-.02.67-.1 1.04c-.15.72-.52 2.05-.67 2.82-.21.96-.38 1.69-.03 1.69 1.07 0 2.4-3.1 2.66-4.33l.3-1.38c0-.02.04-.12.12-.1l1.05.2q.12.02.08.21zm3.5-2.8c-.04.72.26 1.28.7 1.28.62 0 1.22-.39 1.63-.98l.1-.13c.02-.04.1-.09.14-.06l.32.31q.04.05-.01.12a2.8 2.8 0 0 1-2.32 1.3c-1.5 0-2.26-1.27-1.85-3.18.36-1.67 1.72-3.2 3.22-3.2 1.28 0 1.86.63 1.6 1.86-.24 1.14-1.6 2.26-3.53 2.68m1.81-3.99c-.75 0-1.31 1-1.66 2.65q-.08.37-.12.73 1.94-.51 2.27-2.18c.17-.75-.03-1.2-.49-1.2m6.72 5.8c-1.4 0-1.59-.12-1.85-.12-.35 0-.33.08-.64.08-.08 0-.17-.02-.15-.15l.88-4.3.82-4.26q.04-.18.22-.18h2.83c1.71 0 3.02 1.42 2.45 4.27-.48 2.4-2.23 4.66-4.57 4.66m1.6-8.31h-.87c-.16 0-.27.15-.31.33l-.7 3.5-.62 3.08c-.1.56.22.74.82.74 1.87 0 2.7-2.53 3.01-4.1.55-2.72-.34-3.55-1.33-3.55m8.05 3.4q-.06.1-.16.12c-.07 0-.31-.38-.63-.38-.55 0-1.5 1.54-2 3.77l-.29 1.33c0 .01-.04.12-.12.1l-1.03-.2c-.11-.02-.14-.03-.1-.21l.96-4.42c.1-.5.15-1.02.12-1.3q0-.17.19-.17h1q.18 0 .16.18c0 .32.05.46-.09 1.03l-.01.06c-.03.1.07.15.12.06.13-.2.17-.37.3-.53.5-.72 1.07-.89 1.71-.89q.26 0 .37.17.06.11.01.25zm2.28 4.94c-1.58 0-2.43-1.31-2.06-3.24.37-1.92 1.7-3.15 3.29-3.15s2.43 1.29 2.06 3.21-1.7 3.18-3.29 3.18m1.1-5.74c-1.15 0-1.52 1.36-1.7 2.34-.18.93-.42 2.84.72 2.84 1.15 0 1.53-1.51 1.72-2.46.19-.96.41-2.72-.74-2.72m5.12 5.83a1.4 1.4 0 0 1-.9-.34q-.04-.02-.06.04l-.33 1.56c-.11.5-.15 1.03-.12 1.3q0 .17-.19.16h-1q-.18.01-.17-.16c.02-.33.07-.71.19-1.3l.94-4.43.4-1.96c.08-.37.1-1.08.1-1.08q0-.18.18-.18h1.09q.17 0 .13.18l-.1.72c-.02.1.05.15.13.05.41-.56 1-1.04 1.67-1.04 1.08 0 1.99.8 1.48 3.15-.42 1.99-1.89 3.32-3.44 3.33m1.54-5.74c-.85 0-1.6 1.38-1.85 2.49l-.25 1.2c-.18.85.13 1.49.67 1.49.8 0 1.6-1.11 1.95-2.77.24-1.12.27-2.4-.52-2.4m7.1.52c-.05.12-.16.13-.22.06a2.2 2.2 0 0 0-1.7-.7c-.3 0-.86.1-.98.7-.22 1.21 3.33.74 2.85 3.22-.26 1.35-1.4 1.85-2.66 1.85a4 4 0 0 1-2.06-.48c-.05-.03-.05-.12-.03-.18l.4-.84c.06-.12.17-.1.22-.03.37.63.95.91 1.59.91.37 0 1.25-.32 1.38-1.05.28-1.43-3.2-.91-2.76-3.13.2-1.1 1-1.58 2.17-1.58 1.15 0 1.75.2 2.11.28.07.01.1.09.07.14z%22 class%3D%22b-logo-subtitle%22/%3E%3Cpath fill%3D%22currentColor%22 d%3D%22M156.73 15.21a3.23 3.23 0 0 1-3.26-3.21 3.23 3.23 0 0 1 3.26-3.22c1.8 0 3.27 1.44 3.27 3.22a3.25 3.25 0 0 1-3.27 3.21m0-6.12a2.9 2.9 0 0 0-2.86 2.9c0 1.62 1.29 2.92 2.86 2.92s2.85-1.3 2.85-2.91a2.9 2.9 0 0 0-2.85-2.91m1.64 4.74h-.68q-.07-.01-.1-.08l-.76-1.4q-.14-.24-.32-.24h-.22q-.11 0-.12.1v1.55q0 .06-.07.07h-.54q-.08 0-.08-.07v-3.54q-.01-.07.05-.07h1.6c.55 0 .97.37.97.87s-.35.9-.87 1.02q-.03 0 0 .03l.23.3.8 1.15.17.24q.04.06-.06.07m-1.64-3.44h-.4c-.07 0-.15.07-.15.15l-.02 1.21q.01.1.13.11h.2c.55 0 .87-.22.87-.8 0-.39-.25-.67-.63-.67M28.33 37.6l-5.68-11.9-.26-.52c-.7-1.43-1.06-2.15-1.5-2.51l-.04-.05q0-.04.2-.08c5.84-1.27 10.34-5.43 11.46-10.6.52-2.37.06-4.6-1.28-6.27-1.51-1.88-4.07-2.96-7-2.96H9.09c-.74 0-.9.42-1.03.92l-3.92 18.2-4.1 18.2q-.11.48.1.75.21.28.75.28h3.66q.98 0 1.21-.92l3.47-16c.1-.47.72-.84 1.18-.84h4.41q1.6-.01 2.52 2.4l5.61 14.46.01.03c.2.45.38.87 1.07.87h4.6c.41 0 .77-.17.93-.44q.18-.3.03-.63zm-2.04-25.3c-1.2 5.46-4.72 8.11-10.77 8.11h-4.54a.8.8 0 0 1-.58-.3.7.7 0 0 1-.16-.58l2.84-12.57c.16-.68.97-1.29 1.75-1.29h6.62c1.74 0 3.13.6 4.02 1.7.97 1.2 1.25 2.96.82 4.93m42.64 5.38c.44 0 .9-.19.98-.61l.5-2.27c.05-.24-.02-.39-.1-.47q-.19-.24-.61-.24h-5.54l1.45-6.18c.86-3.7 3.45-5.01 5.4-5.01 1.52 0 2.85.6 3.6 1.15q.36.24.71.12.43-.15.63-.65l.95-2.6c.1-.3.04-.49-.04-.6Q76.64 0 75.94 0H70.5c-5.34 0-8.69 3.13-10.24 9.58l-1.1 4.5h-3.1c-.52 0-.96.36-1.04.82l-.38 1.7q-.07.4.15.65c.09.11.26.24.57.24h3L54.5 34.44a297 297 0 0 1-1.23 4.78q-.23.83.58 1.23l.02.01 3.07 1c.16.06.37.14.58.07.22-.08.32-.3.43-.57l.03-.08.01-.04 1.03-4.47 4.34-18.87zm16.85 2.22c.42 0 .8-.32.95-.63l1.9-3.48c.2-.4.17-.86-.07-1.27-.37-.53-1.06-.8-1.95-.8-3.03 0-5.97 1.73-8.5 5a34 34 0 0 0-1.7 2.3.2.2 0 0 1-.26.07c-.04-.02-.09-.07-.06-.14l.38-1.4c.51-1.81.48-2.62.45-3.47q-.02-.44 0-1 0-.98-.98-.98h-3.02q-.61 0-.91.33a.8.8 0 0 0-.19.67 20 20 0 0 1-.63 5.42l-4.54 18.9c-.2.82.01.97.52 1.12l.07.02 3.22.88q.25.08.47-.07c.23-.16.3-.49.3-.58v.05l1.39-5.68c2.38-9.74 7.3-15.95 9.63-15.95 1 0 2.14.32 2.82.52.4.11.59.17.71.17m33.03-3.29c3.26 0 5.56.86 7.48 2.78q.31.3.72.25a1 1 0 0 0 .7-.56l1.7-3.22c.1-.2.11-.44.02-.63a.6.6 0 0 0-.43-.31l-1.1-.24c-1.7-.38-4.28-.97-8.53-.97-5.44 0-9.05 2.49-10.17 7-1.32 5.35 3.2 7 7.18 8.47 3.31 1.22 6.17 2.28 5.5 5.11-.7 2.82-4.54 4.32-7.04 4.32a7.8 7.8 0 0 1-6.95-3.7.8.8 0 0 0-.67-.34q-.47.04-.71.5l-1.83 3.34a1 1 0 0 0-.07.7q.08.24.3.35c1.32.7 3.8 1.98 9.42 1.98 7.13 0 11.16-2.4 12.33-7.37 1.4-5.92-3.68-7.87-7.76-9.44-3.1-1.2-5.8-2.22-5.24-4.58.6-2.38 3.02-3.44 5.15-3.44m33.17-1.03a5.1 5.1 0 0 0-4.17-1.87c-3.7 0-7.82 3.21-11.04 8.58-.14.2-.36.26-.5.21q-.16-.07-.11-.31l3.6-14.84c.64-2.53.76-4.18.82-5.54q0-1-.97-.99h-3.03q-.62 0-.92.34a.8.8 0 0 0-.18.66c.12 1.13-.13 3.3-.63 5.43L127.1 39.6c-.1.66.31.85.73.95.94.19 3.06.88 3.08.89q.28.08.51-.09a1 1 0 0 0 .34-.56v.04l.5-2.28c.3-1.25.63-2.66.81-3.58.9-2.19 2.02-4.27 3-6.1l.77-1.45c3.76-7.13 7.32-11.06 10.03-11.06q.6 0 .98.48c.8 1.03.83 3.6.07 6.7-.4 1.75-1.09 4.2-1.76 6.59-.6 2.15-1.17 4.19-1.52 5.67a28 28 0 0 0-.5 4.28c-.04.22-.05.52.14.74q.2.24.7.24h3.2q.99 0 .99-.97c0-.04-.12-2.66.24-4.19.3-1.34.95-3.53 1.62-5.84.72-2.45 1.46-4.98 1.85-6.67.78-3.33.46-6.1-.9-7.82m-100.3 1.2c-1.45-1.85-3.82-2.87-6.69-2.87a14.6 14.6 0 0 0-9.36 3.74 19 19 0 0 0-6.03 9.95q-1.77 7.19 1.14 10.93c1.57 2 4.18 3.11 7.35 3.11 4.14 0 8.52-2.17 11.15-5.52.17-.17.32-.43.07-.76l-.02-.02-.95-1.02.02.02a.4.4 0 0 0-.29-.15c-.27-.01-.53.24-.67.39-1.59 1.83-4.78 3.72-7.4 3.72-1.32 0-3.15-.32-4.39-1.82q-1.97-2.41-.98-7.53c.1-.58.75-1.08 1.42-1.08h14.58c.44 0 1.01-.35 1.5-.9.28-.34.55-.88.62-1.16.94-3.81.57-6.94-1.07-9.04m-3.62 6.27c-.29 1.18-.74 1.63-1.93 1.93s-1.74.3-3.37.3c-2.12 0-6.31-.06-6.35-.06q-.36 0-.48-.17-.15-.2.01-.68c1.83-4.93 5.02-7.88 8.52-7.88 1.35 0 2.42.46 3.1 1.33.89 1.13 1.06 2.94.5 5.22m55.66 12.29-.95-1.01.02.02a.4.4 0 0 0-.29-.16c-.27 0-.56.27-.68.4-1.58 1.82-4.77 3.71-7.39 3.71-1.32 0-3.15-.31-4.39-1.82q-1.98-2.41-.98-7.53c.09-.58.75-1.08 1.42-1.08h14.57c.45 0 1.02-.35 1.5-.9.29-.34.56-.88.63-1.16q1.42-5.82-1.07-9.03c-1.44-1.85-3.82-2.87-6.69-2.87-3.22 0-6.55 1.33-9.36 3.74a19 19 0 0 0-6.03 9.95q-1.77 7.19 1.14 10.93c1.57 2 4.18 3.11 7.34 3.11 4.15 0 8.53-2.17 11.16-5.52.16-.17.32-.43.07-.76zM90.38 24.37c1.83-4.93 5-7.88 8.51-7.88 1.35 0 2.42.46 3.1 1.33.9 1.14 1.07 2.95.5 5.23-.29 1.18-.74 1.63-1.93 1.93s-1.74.3-3.37.3c-2.12 0-6.3-.06-6.35-.06q-.36 0-.48-.17-.15-.21.02-.68%22/%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: 100%;
  cursor: pointer;
  height: 50px;
  width: 100px;
}
.b-icons_guide-svg_multi_image {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 width%3D%22160%22 height%3D%2262%22 class%3D%22m-large_logo%22 viewBox%3D%220 0 160 62%22%3E%3Cpath fill%3D%22currentColor%22 d%3D%22M30.7 58.14q-.06.15-.23.14h-4.6q-.18 0-.13-.17l.86-4.26.83-4.26q.04-.18.21-.18h1.17q.18 0 .13.18l-.85 4.26-.65 3.32c-.04.2.07.36.24.36h.93c.67 0 2.08-.28 2.08-.28.1-.02.2.01.17.13zm5.62-1.32a5 5 0 0 0-.14 1.29q.02.17-.18.17h-1.01q-.17 0-.16-.17c.01-.33 0-.57.14-1.14l.08-.31c.04-.15-.09-.2-.17-.06-.8 1.28-1.28 1.77-2.14 1.77-.97 0-1.24-.99-.97-2.2.16-.77.57-2.24.72-2.94.08-.37.05-.98.05-.98q0-.18.17-.18h1q.17 0 .15.18s-.02.67-.1 1.04c-.16.72-.52 2.05-.68 2.82-.21.96-.37 1.69-.02 1.69 1.06 0 2.4-3.1 2.66-4.34L36 52.1c0-.02.04-.12.12-.1l1.05.2c.1.01.12.03.08.2zm3.73 1.55q-.58.01-.99-.47c-.08-.1-.16-.13-.29 0l-.3.3a.3.3 0 0 1-.2.08h-.36q-.16 0-.1-.2l1.63-7.65c.1-.5.14-1.02.12-1.29q-.02-.17.18-.17h1q.17 0 .17.17a7 7 0 0 1-.17 1.3l-.55 2.46c-.03.1.05.15.13.04.47-.59.96-.96 1.67-.96 1.07 0 2 .76 1.5 3.14-.41 1.92-1.89 3.24-3.45 3.25m1.54-5.65c-.85 0-1.61 1.29-1.85 2.4l-.27 1.2c-.18.86.15 1.5.68 1.5.8 0 1.6-1.04 1.96-2.7.24-1.12.27-2.4-.52-2.4m7 .71q-.05.1-.16.12c-.11.02-.3-.38-.62-.38-.54 0-1.5 1.54-2 3.77l-.29 1.33c0 .01-.04.12-.12.1l-1.04-.2c-.1-.02-.13-.03-.09-.21l.96-4.42c.1-.5.14-1.02.12-1.3q-.02-.17.18-.17h1.01q.17 0 .16.18c-.01.32.04.46-.1 1.03v.06c-.03.1.06.15.11.06.14-.2.18-.37.3-.53.5-.72 1.07-.89 1.71-.89q.26 0 .37.17.07.11.02.25zm2.5-.19-.82 3.73c-.13.59.1.87.41.87.08 0 .12 0 .1.1l-.06.23c-.03.1-.04.12-.13.12h-.61c-.81 0-1.23-.39-.95-1.7l.72-3.35c.08-.35.19-.99.19-.99q.04-.18.21-.18h1.04q.18 0 .13.18zm-.22-2.8c-.35 0-.63-.16-.53-.6.1-.52.64-.8 1.05-.8.34 0 .62.18.53.62-.1.52-.64.79-1.05.79m6 2.55c-.03.12-.13.17-.2.13a2.4 2.4 0 0 0-1.42-.46c-.75 0-1.51.86-1.87 2.5-.41 1.93.3 2.47.9 2.47.47 0 1.18-.3 1.64-.9.04-.04.1-.09.13-.04l.23.3q.03.05-.01.11a2.9 2.9 0 0 1-2.4 1.27c-1.37 0-2.35-.85-1.85-3.2.42-1.91 1.81-3.1 3.31-3.1h1.65q.17-.02.12.15zm5.06 4.1c-.08.35.08 1.02.08 1.02q.03.17-.14.17h-.88c-.12 0-.13-.01-.15-.13a2 2 0 0 1 .08-1.19c.03-.09-.05-.13-.1-.04-.54.9-1.25 1.45-2.01 1.45-1.18 0-2.1-.71-1.56-3.1.44-1.88 1.93-3.29 3.42-3.29 1.3 0 2.14.87 1.87 2.16zm-1.3-4.56c-.76 0-1.62 1.08-2 2.73-.26 1.13-.34 2.36.44 2.36S60.7 56.2 61 55.07l.16-.57c.32-1.17 0-1.97-.53-1.97m7.72 4.58c-.08.37-.05 1-.05 1q0 .17-.17.17h-1q-.17 0-.13-.17s.01-.67.1-1.04c.15-.72.5-2.06.66-2.82.21-.97.37-1.69.02-1.69-1.06 0-2.52 3.1-2.79 4.33l-.3 1.38c0 .01-.03.12-.11.1l-1.04-.2c-.1-.02-.13-.03-.1-.21l.95-4.42c.1-.5.16-1.02.13-1.3q0-.17.19-.17h1.01q.17 0 .16.18a6 6 0 0 1-.15 1.14l-.07.3c-.02.16.09.2.16.07.81-1.29 1.41-1.78 2.28-1.78.97 0 1.23 1 .97 2.2-.16.78-.57 2.22-.72 2.93m6.23-4.4q-.01.13-.17.12l-1.68-.03-.9 4.17c-.13.59.1.87.41.87h.33c.08 0 .1 0 .08.1l-.04.22q0 .14-.13.12h-.94c-.81 0-1.25-.38-.96-1.7l.82-3.78h-1.17a.1.1 0 0 1-.1-.14c.01-.07.05-.35.09-.44q.05-.14.17-.15h1.17l.3-1.37q0-.09.08-.1l1.17-.38q.19-.07.16.14l-.36 1.71h1.67q.12 0 .1.12zm8.13-2.32q-.07.18-.23.13c-.74-.42-1.31-.52-2-.52s-1.36.43-1.57 1.53c-.18.93.1 1.58.7 1.58h1.34c.11 0 .18.2.15.34s-.14.35-.28.35h-.89c-.7 0-1.63.83-1.85 1.93-.25 1.3.34 2 1.07 2 .83 0 1.6-.4 2.25-.98.04-.05.12-.05.15 0l.24.4q.05.07-.01.15a4 4 0 0 1-2.88 1.16c-1.98 0-2.75-1.15-2.45-2.69.17-.89.83-1.73 1.72-2.1.04-.01.07-.12.03-.13-.74-.39-1.04-1.19-.86-2.12.23-1.24 1.29-2 3.13-2h2.4c.1 0 .19.02.14.14zm4.19 8.94c-.35 1.6-1.12 2.2-2.13 2.2h-1.4c-.11 0-.23-.05-.18-.17l.25-.6q.1-.16.23-.1s.39.33.72.33c.5 0 .98-.58 1.16-1.4l.6-2.86c.03-.15-.07-.2-.15-.06-.81 1.29-1.25 1.72-2.12 1.72-.97 0-1.25-1-.98-2.22.16-.77.57-2.23.72-2.94.08-.37.05-.98.05-.98q0-.17.17-.17h1q.17 0 .15.17s-.02.67-.1 1.04c-.15.72-.52 2.05-.67 2.82-.21.96-.38 1.69-.03 1.69 1.07 0 2.4-3.1 2.66-4.33l.3-1.38c0-.02.04-.12.12-.1l1.05.2q.12.02.08.21zm3.5-2.8c-.04.72.26 1.28.7 1.28.62 0 1.22-.39 1.63-.98l.1-.13c.02-.04.1-.09.14-.06l.32.31q.04.05-.01.12a2.8 2.8 0 0 1-2.32 1.3c-1.5 0-2.26-1.27-1.85-3.18.36-1.67 1.72-3.2 3.22-3.2 1.28 0 1.86.63 1.6 1.86-.24 1.14-1.6 2.26-3.53 2.68m1.81-3.99c-.75 0-1.31 1-1.66 2.65q-.08.37-.12.73 1.94-.51 2.27-2.18c.17-.75-.03-1.2-.49-1.2m6.72 5.8c-1.4 0-1.59-.12-1.85-.12-.35 0-.33.08-.64.08-.08 0-.17-.02-.15-.15l.88-4.3.82-4.26q.04-.18.22-.18h2.83c1.71 0 3.02 1.42 2.45 4.27-.48 2.4-2.23 4.66-4.57 4.66m1.6-8.31h-.87c-.16 0-.27.15-.31.33l-.7 3.5-.62 3.08c-.1.56.22.74.82.74 1.87 0 2.7-2.53 3.01-4.1.55-2.72-.34-3.55-1.33-3.55m8.05 3.4q-.06.1-.16.12c-.07 0-.31-.38-.63-.38-.55 0-1.5 1.54-2 3.77l-.29 1.33c0 .01-.04.12-.12.1l-1.03-.2c-.11-.02-.14-.03-.1-.21l.96-4.42c.1-.5.15-1.02.12-1.3q0-.17.19-.17h1q.18 0 .16.18c0 .32.05.46-.09 1.03l-.01.06c-.03.1.07.15.12.06.13-.2.17-.37.3-.53.5-.72 1.07-.89 1.71-.89q.26 0 .37.17.06.11.01.25zm2.28 4.94c-1.58 0-2.43-1.31-2.06-3.24.37-1.92 1.7-3.15 3.29-3.15s2.43 1.29 2.06 3.21-1.7 3.18-3.29 3.18m1.1-5.74c-1.15 0-1.52 1.36-1.7 2.34-.18.93-.42 2.84.72 2.84 1.15 0 1.53-1.51 1.72-2.46.19-.96.41-2.72-.74-2.72m5.12 5.83a1.4 1.4 0 0 1-.9-.34q-.04-.02-.06.04l-.33 1.56c-.11.5-.15 1.03-.12 1.3q0 .17-.19.16h-1q-.18.01-.17-.16c.02-.33.07-.71.19-1.3l.94-4.43.4-1.96c.08-.37.1-1.08.1-1.08q0-.18.18-.18h1.09q.17 0 .13.18l-.1.72c-.02.1.05.15.13.05.41-.56 1-1.04 1.67-1.04 1.08 0 1.99.8 1.48 3.15-.42 1.99-1.89 3.32-3.44 3.33m1.54-5.74c-.85 0-1.6 1.38-1.85 2.49l-.25 1.2c-.18.85.13 1.49.67 1.49.8 0 1.6-1.11 1.95-2.77.24-1.12.27-2.4-.52-2.4m7.1.52c-.05.12-.16.13-.22.06a2.2 2.2 0 0 0-1.7-.7c-.3 0-.86.1-.98.7-.22 1.21 3.33.74 2.85 3.22-.26 1.35-1.4 1.85-2.66 1.85a4 4 0 0 1-2.06-.48c-.05-.03-.05-.12-.03-.18l.4-.84c.06-.12.17-.1.22-.03.37.63.95.91 1.59.91.37 0 1.25-.32 1.38-1.05.28-1.43-3.2-.91-2.76-3.13.2-1.1 1-1.58 2.17-1.58 1.15 0 1.75.2 2.11.28.07.01.1.09.07.14z%22 class%3D%22b-logo-subtitle%22/%3E%3Cpath fill%3D%22currentColor%22 d%3D%22M156.73 15.21a3.23 3.23 0 0 1-3.26-3.21 3.23 3.23 0 0 1 3.26-3.22c1.8 0 3.27 1.44 3.27 3.22a3.25 3.25 0 0 1-3.27 3.21m0-6.12a2.9 2.9 0 0 0-2.86 2.9c0 1.62 1.29 2.92 2.86 2.92s2.85-1.3 2.85-2.91a2.9 2.9 0 0 0-2.85-2.91m1.64 4.74h-.68q-.07-.01-.1-.08l-.76-1.4q-.14-.24-.32-.24h-.22q-.11 0-.12.1v1.55q0 .06-.07.07h-.54q-.08 0-.08-.07v-3.54q-.01-.07.05-.07h1.6c.55 0 .97.37.97.87s-.35.9-.87 1.02q-.03 0 0 .03l.23.3.8 1.15.17.24q.04.06-.06.07m-1.64-3.44h-.4c-.07 0-.15.07-.15.15l-.02 1.21q.01.1.13.11h.2c.55 0 .87-.22.87-.8 0-.39-.25-.67-.63-.67M28.33 37.6l-5.68-11.9-.26-.52c-.7-1.43-1.06-2.15-1.5-2.51l-.04-.05q0-.04.2-.08c5.84-1.27 10.34-5.43 11.46-10.6.52-2.37.06-4.6-1.28-6.27-1.51-1.88-4.07-2.96-7-2.96H9.09c-.74 0-.9.42-1.03.92l-3.92 18.2-4.1 18.2q-.11.48.1.75.21.28.75.28h3.66q.98 0 1.21-.92l3.47-16c.1-.47.72-.84 1.18-.84h4.41q1.6-.01 2.52 2.4l5.61 14.46.01.03c.2.45.38.87 1.07.87h4.6c.41 0 .77-.17.93-.44q.18-.3.03-.63zm-2.04-25.3c-1.2 5.46-4.72 8.11-10.77 8.11h-4.54a.8.8 0 0 1-.58-.3.7.7 0 0 1-.16-.58l2.84-12.57c.16-.68.97-1.29 1.75-1.29h6.62c1.74 0 3.13.6 4.02 1.7.97 1.2 1.25 2.96.82 4.93m42.64 5.38c.44 0 .9-.19.98-.61l.5-2.27c.05-.24-.02-.39-.1-.47q-.19-.24-.61-.24h-5.54l1.45-6.18c.86-3.7 3.45-5.01 5.4-5.01 1.52 0 2.85.6 3.6 1.15q.36.24.71.12.43-.15.63-.65l.95-2.6c.1-.3.04-.49-.04-.6Q76.64 0 75.94 0H70.5c-5.34 0-8.69 3.13-10.24 9.58l-1.1 4.5h-3.1c-.52 0-.96.36-1.04.82l-.38 1.7q-.07.4.15.65c.09.11.26.24.57.24h3L54.5 34.44a297 297 0 0 1-1.23 4.78q-.23.83.58 1.23l.02.01 3.07 1c.16.06.37.14.58.07.22-.08.32-.3.43-.57l.03-.08.01-.04 1.03-4.47 4.34-18.87zm16.85 2.22c.42 0 .8-.32.95-.63l1.9-3.48c.2-.4.17-.86-.07-1.27-.37-.53-1.06-.8-1.95-.8-3.03 0-5.97 1.73-8.5 5a34 34 0 0 0-1.7 2.3.2.2 0 0 1-.26.07c-.04-.02-.09-.07-.06-.14l.38-1.4c.51-1.81.48-2.62.45-3.47q-.02-.44 0-1 0-.98-.98-.98h-3.02q-.61 0-.91.33a.8.8 0 0 0-.19.67 20 20 0 0 1-.63 5.42l-4.54 18.9c-.2.82.01.97.52 1.12l.07.02 3.22.88q.25.08.47-.07c.23-.16.3-.49.3-.58v.05l1.39-5.68c2.38-9.74 7.3-15.95 9.63-15.95 1 0 2.14.32 2.82.52.4.11.59.17.71.17m33.03-3.29c3.26 0 5.56.86 7.48 2.78q.31.3.72.25a1 1 0 0 0 .7-.56l1.7-3.22c.1-.2.11-.44.02-.63a.6.6 0 0 0-.43-.31l-1.1-.24c-1.7-.38-4.28-.97-8.53-.97-5.44 0-9.05 2.49-10.17 7-1.32 5.35 3.2 7 7.18 8.47 3.31 1.22 6.17 2.28 5.5 5.11-.7 2.82-4.54 4.32-7.04 4.32a7.8 7.8 0 0 1-6.95-3.7.8.8 0 0 0-.67-.34q-.47.04-.71.5l-1.83 3.34a1 1 0 0 0-.07.7q.08.24.3.35c1.32.7 3.8 1.98 9.42 1.98 7.13 0 11.16-2.4 12.33-7.37 1.4-5.92-3.68-7.87-7.76-9.44-3.1-1.2-5.8-2.22-5.24-4.58.6-2.38 3.02-3.44 5.15-3.44m33.17-1.03a5.1 5.1 0 0 0-4.17-1.87c-3.7 0-7.82 3.21-11.04 8.58-.14.2-.36.26-.5.21q-.16-.07-.11-.31l3.6-14.84c.64-2.53.76-4.18.82-5.54q0-1-.97-.99h-3.03q-.62 0-.92.34a.8.8 0 0 0-.18.66c.12 1.13-.13 3.3-.63 5.43L127.1 39.6c-.1.66.31.85.73.95.94.19 3.06.88 3.08.89q.28.08.51-.09a1 1 0 0 0 .34-.56v.04l.5-2.28c.3-1.25.63-2.66.81-3.58.9-2.19 2.02-4.27 3-6.1l.77-1.45c3.76-7.13 7.32-11.06 10.03-11.06q.6 0 .98.48c.8 1.03.83 3.6.07 6.7-.4 1.75-1.09 4.2-1.76 6.59-.6 2.15-1.17 4.19-1.52 5.67a28 28 0 0 0-.5 4.28c-.04.22-.05.52.14.74q.2.24.7.24h3.2q.99 0 .99-.97c0-.04-.12-2.66.24-4.19.3-1.34.95-3.53 1.62-5.84.72-2.45 1.46-4.98 1.85-6.67.78-3.33.46-6.1-.9-7.82m-100.3 1.2c-1.45-1.85-3.82-2.87-6.69-2.87a14.6 14.6 0 0 0-9.36 3.74 19 19 0 0 0-6.03 9.95q-1.77 7.19 1.14 10.93c1.57 2 4.18 3.11 7.35 3.11 4.14 0 8.52-2.17 11.15-5.52.17-.17.32-.43.07-.76l-.02-.02-.95-1.02.02.02a.4.4 0 0 0-.29-.15c-.27-.01-.53.24-.67.39-1.59 1.83-4.78 3.72-7.4 3.72-1.32 0-3.15-.32-4.39-1.82q-1.97-2.41-.98-7.53c.1-.58.75-1.08 1.42-1.08h14.58c.44 0 1.01-.35 1.5-.9.28-.34.55-.88.62-1.16.94-3.81.57-6.94-1.07-9.04m-3.62 6.27c-.29 1.18-.74 1.63-1.93 1.93s-1.74.3-3.37.3c-2.12 0-6.31-.06-6.35-.06q-.36 0-.48-.17-.15-.2.01-.68c1.83-4.93 5.02-7.88 8.52-7.88 1.35 0 2.42.46 3.1 1.33.89 1.13 1.06 2.94.5 5.22m55.66 12.29-.95-1.01.02.02a.4.4 0 0 0-.29-.16c-.27 0-.56.27-.68.4-1.58 1.82-4.77 3.71-7.39 3.71-1.32 0-3.15-.31-4.39-1.82q-1.98-2.41-.98-7.53c.09-.58.75-1.08 1.42-1.08h14.57c.45 0 1.02-.35 1.5-.9.29-.34.56-.88.63-1.16q1.42-5.82-1.07-9.03c-1.44-1.85-3.82-2.87-6.69-2.87-3.22 0-6.55 1.33-9.36 3.74a19 19 0 0 0-6.03 9.95q-1.77 7.19 1.14 10.93c1.57 2 4.18 3.11 7.34 3.11 4.15 0 8.53-2.17 11.16-5.52.16-.17.32-.43.07-.76zM90.38 24.37c1.83-4.93 5-7.88 8.51-7.88 1.35 0 2.42.46 3.1 1.33.9 1.14 1.07 2.95.5 5.23-.29 1.18-.74 1.63-1.93 1.93s-1.74.3-3.37.3c-2.12 0-6.3-.06-6.35-.06q-.36 0-.48-.17-.15-.21.02-.68%22/%3E%3C/svg%3E");
  cursor: pointer;
  height: 50px;
  width: 100px;
}
.b-icons_guide-create_mask_icon {
  cursor: pointer;
  height: 50px;
  width: 50px;
}
.b-icons_guide-create_mask_icon::before {
  background-color: #0068ff;
  content: "";
  display: inline-block;
  height: 16px;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z%22%2F%3E%3C%2Fsvg%3E");
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z%22%2F%3E%3C%2Fsvg%3E");
  vertical-align: sub;
  width: 16px;
}
.b-icons_guide-create_mask_icon:hover::before {
  background-color: #f95cce;
}
.b-icons_guide-icon {
  --icon-color: #0068ff;
  cursor: pointer;
  height: 50px;
  width: 50px;
}
.b-icons_guide-icon::before {
  background-color: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 50px;
  -webkit-mask-image: url("../images/icons-sprite.svg#check-16");
          mask-image: url("../images/icons-sprite.svg#check-16");
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  width: 50px;
}
.b-icons_guide-icon:hover {
  --icon-color: #f95cce;
}

body {
  overflow: auto;
  overflow-y: scroll;
  pointer-events: all;
  visibility: var(--page_visibility, hidden);
}

/*# sourceMappingURL=guide.css.map*/