/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
	color: inherit;
}
button {
	border: none;
	padding: 0;
	padding-block: 0;
	padding-inline: 0;
}

input {
	border: none;
}
@font-face {
    font-family: 'TTCommons';
    src: url(fonts/dcfd1567a171a24deb54.woff2) format('woff2'),
         url(fonts/6e64b30e835e5872e224.woff) format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'TTCommons';
    src: url(fonts/68e987593063265c688c.woff2) format('woff2'),
         url(fonts/8e7d7a3962646adbad25.woff) format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'TTCommons';
    src: url(fonts/7f17e3b07384395da584.woff2) format('woff2'),
         url(fonts/dbc16e7a4d4aa8da9b7d.woff) format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'TTCommons';
    src: url(fonts/869ee89ffcd0bd8f7d13.woff2) format('woff2'),
         url(fonts/36b06bbb8c98131d5a5b.woff) format('woff');
    font-weight: 700;
}

.text_s {
  font-weight: 400;
  font-size: 16rem;
  line-height: 100%;
}

.text_m {
  font-weight: 400;
  font-size: 20rem;
  line-height: 100%;
}

.text_m_medium {
  font-weight: 500;
  font-size: 20rem;
  line-height: 100%;
}

.text_l_medium {
  font-weight: 500;
  font-size: 24rem;
  line-height: 100%;
}

.title_h5 {
  font-weight: 500;
  font-size: 32rem;
  line-height: 100%;
  color: var(--wb-900);
}

.title_h4 {
  font-weight: 500;
  font-size: 40rem;
  line-height: 100%;
}

.title_h3 {
  font-weight: 500;
  font-size: 48rem;
  line-height: 83%;
}

.title_h2 {
  font-weight: 500;
  font-size: 56rem;
  line-height: 86%;
}

.title_h1 {
  font-weight: 600;
  font-size: 76rem;
  line-height: 100%;
  text-align: center;
  max-width: 1440rem;
}

@media (max-width: 1024px) {
  .title_h1 {
    font-size: 40rem;
  }
  .title_h2 {
    font-size: 36rem;
  }
  .title_h3 {
    font-size: 28rem;
  }
}

@media (max-width: 768px) {
  .title_h1 {
    font-size: 28rem;
    max-width: 95vw;
  }
  .title_h2 {
    font-size: 24rem;
  }
  .title_h3 {
    font-size: 20rem;
  }
  .title_h4 {
    font-size: 24rem;
  }
  .title_h5 {
    font-weight: 600;
    font-size: 28rem;
  }
  .text_m, .text_m_medium, .text_l_medium {
    font-weight: 400;
    font-size: 18rem;
    line-height: 111%;
  }
  .text_s {
    font-weight: 500;
    font-size: 16rem;
    line-height: 113%;
  }
  .article_card_title {
    font-weight: 500;
  }
}
:root {
  /* palette */

  --base-success: #00E116;
	--base-error: #FF413B;

	--base-50: #faf1ff;
	--base-100: #e2d1ff;
	--base-200: #caafff;
	--base-300: #b48dff;
	--base-400: #9e6cff;
	--base-500: #8f58fa;
	--base-600: #6f3bca;
	--base-700: #562f9d;
	--base-800: #3e256f;
	--base-900: #271a46;
	--base-950: #130d23;

  --wb-0: #FFFFFF;
  --wb-50: #F5F5F5;
  --wb-100: #EBEBEB;
  --wb-200: #D6D6D6;
  --wb-300: #C2C2C2;
  --wb-400: #ADADAD;
  --wb-500: #999999;
  --wb-600: #7B7B7B;
  --wb-700: #5E5E5E;
  --wb-800: #404040;
  --wb-850: #313131;
  --wb-900: #232323;
  --wb-950: #141414;
  --wb-1000: #050505;

	--base-finance-50: #fffdea;
	--base-finance-100: #fff7c5;
	--base-finance-200: #fff085;
	--base-finance-300: #ffe146;
	--base-finance-400: #ffcf1b;
	--base-finance-500: #ffae00;
	--base-finance-600: #e28400;
	--base-finance-700: #bb5c02;
	--base-finance-800: #984708;
	--base-finance-900: #7c3a0b;
	--base-finance-950: #481d00;

	--base-home-50: #fdf2f8;
	--base-home-100: #fce7f3;
	--base-home-200: #fad0e8;
	--base-home-300: #f9b8db;
	--base-home-400: #f274b5;
	--base-home-500: #e94b98;
	--base-home-600: #d82a76;
	--base-home-700: #bb1b5c;
	--base-home-800: #9b194c;
	--base-home-900: #811a43;
	--base-home-950: #4f0824;

	--base-health-50: #f3faeb;
	--base-health-100: #e2f4d3;
	--base-health-200: #c8ebab;
	--base-health-300: #a9de82;
	--base-health-400: #83ca51;
	--base-health-500: #64b032;
	--base-health-600: #4b8c24;
	--base-health-700: #3b6b20;
	--base-health-800: #31561e;
	--base-health-900: #2c491e;
	--base-health-950: #14280b;

	--base-life-50: #f0f9ff;
	--base-life-100: #dff1ff;
	--base-life-200: #b8e4ff;
	--base-life-300: #82d3ff;
	--base-life-400: #33b9fd;
	--base-life-500: #09a0ee;
	--base-life-600: #007fcc;
	--base-life-700: #0065a5;
	--base-life-800: #045688;
	--base-life-900: #0a4870;
	--base-life-950: #062d4b;

	--base-career-50: #fef4f2;
	--base-career-100: #ffe5e1;
	--base-career-200: #ffcfc8;
	--base-career-300: #ffafa2;
	--base-career-400: #fc8370;
	--base-career-500: #f4583f;
	--base-career-600: #e13b21;
	--base-career-700: #be2e17;
	--base-career-800: #9d2917;
	--base-career-900: #82281a;
	--base-career-950: #471108;

	--base-docs-50: #ededfd;
	--base-docs-100: #dadbfa;
	--base-docs-200: #b6b7f5;
	--base-docs-300: #9193f1;
	--base-docs-400: #6d6fec;
	--base-docs-500: #484be7;
	--base-docs-600: #3a3cba;
	--base-docs-700: #2c2d8d;
	--base-docs-800: #1d1f60;
	--base-docs-900: #0f1033;
	--base-docs-950: #08081c;

}
.A_button {
  border-radius: 16rem;
  padding: 12rem 20rem 10rem;
  font-weight: 400;
  font-size: 20rem;
  transition: all 0.3s ease;
}
.A_button:hover {
  cursor: pointer;
}
.A_button.accent {
  color: var(--wb-0);
  background-color: var(--base-500);
}
.A_button.accent:hover {
  box-shadow: 0 0 12rem 0 rgba(143, 88, 250, 0.6);
}
.A_button.accent:active {
  background-color: var(--base-600);
}
.A_button.dark {
  background-color: var(--wb-900);
  color: var(--wb-0);
}
.A_button.dark:hover {
  background-color: var(--wb-950);
}
.A_button.dark:active {
  background-color: var(--wb-1000);
}
.A_button.light {
  background-color: var(--wb-50);
  color: var(--base-500);
}
.A_button.light:hover {
  background-color: var(--wb-100);
  box-shadow: 0 0 12rem 0 rgba(255, 255, 255, 0.6);
}
.A_button.light:active {
  background-color: var(--wb-200);
}
.A_button.pink {
  color: var(--wb-0);
  background-color: var(--base-home-500);
}
.A_button.pink:hover {
  box-shadow: 0 0 12rem 0 rgba(233, 75, 152, 0.6);
}

.A_close_button {
  width: 44rem;
  height: 44rem;
  border-radius: 8rem;
  background-color: var(--wb-50);
  background-image: url(images/91d31e292c47f7af430c.svg);
  background-size: 20rem;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

.A_close_button:hover,
.A_close_button:active {
  cursor: pointer;
  background-color: var(--wb-900);
  background-image: url(images/c6a9abadb6cf20844fe6.svg);
}

.A_menu_button {
  background-color: var(--wb-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8rem;
  border-radius: 16rem;
  padding: 13rem 24rem 12rem;
  width: 116rem;
}

.A_menu_button:hover {
  cursor: pointer;
}
.A_menu_item_header {
  color: var(--wb-900);
}
.A_menu_item_header:hover {
  color: var(--wb-850);
  cursor: pointer;
}
.A_menu_item_footer {
  color: var(--wb-900);
}
.A_menu_item_footer:hover {
  color: var(--wb-850);
  cursor: pointer;
}
.A_question_answer {
  border-radius: 16rem;
  padding: 16rem;
  width: 380rem;
  height: 72rem;
  background-color: var(--wb-50);
  color: var(--wb-900);
}
.A_question_answer:hover {
  cursor: pointer;
  box-shadow: 0 0 12px 0 rgba(143, 88, 250, 0.6);
  background-color: var(--base-500);
  color: var(--wb-0);
}

.A_question_answer:active {
  color: var(--wb-0);
  background-color: var(--base-600);
}

.A_question_step {
  color: var(--wb-700);
}

.A_question_title {
  color: var(--wb900);
}

.A_badge {
  border-radius: 20rem;
  padding: 6rem 8rem 4rem;
  width: 39rem;
  font-weight: 400;
  font-size: 16rem;
}

.A_badge_finance {
  background-color: var(--base-finance-100);
  color: var(--base-finance-500);
}

.A_badge_docs {
  background-color: var(--base-docs-100);
  color: var(--base-docs-500);
}

.A_badge_home {
  background-color: var(--base-home-100);
  color: var(--base-home-500);
}

.A_badge_health {
  background-color: var(--base-health-100);
  color: var(--base-health-500);
}

.A_badge_life {
  background-color: var(--base-life-100);
  color: var(--base-life-500);
}

.A_badge_career {
  background-color: var(--base-career-100);
  color: var(--base-career-500);
}

.A_menu_item {
  color: var(--wb-0);
}

.A_menu_item:hover {
  cursor: pointer;
  color: var(--wb-50);
}

.A_input {
  border-radius: 16rem;
  padding: 20rem 16rem 20rem 40rem;
  background-color: var(--wb-50);
  color: var(--wb-900);
  font-size: 16rem;
  width: 430rem;
  height: 44rem;
}

.A_input::placeholder {
  color: rgba(35, 35, 35, 0.3);
}

.A_input:focus {
  outline: none;
}

.A_input_search {
  background-image: url(images/1af2ae9dc1620d5ddf98.svg);
  background-repeat: no-repeat;
  background-position: 16rem center;
  margin-top: 11rem;
}

.A_tab_categorie {
  border-radius: 16rem;
  padding: 16rem 20rem;
}

.A_tab_categorie:hover {
  cursor: pointer;
}

.A_tab_health {
  background-color: var(--base-health-100);
  color: var(--base-health-500);
}

.A_tab_health:hover,
.A_tab_health.A_tab_active {
  background-color: var(--base-health-200);
}

.A_tab_finance {
  background-color: var(--base-finance-100);
  color: var(--base-finance-500);
}

.A_tab_finance:hover,
.A_tab_finance.A_tab_active {
  background-color: var(--base-finance-200);
}

.A_tab_home {
  background-color: var(--base-home-100);
  color: var(--base-home-500);
}

.A_tab_home:hover,
.A_tab_home.A_tab_active {
  background-color: var(--base-home-200);
}

.A_tab_docs {
  background-color: var(--base-docs-100);
  color: var(--base-docs-500);
}

.A_tab_docs:hover,
.A_tab_docs.A_tab_active {
  background-color: var(--base-docs-200);
}

.A_tab_life {
  background-color: var(--base-life-100);
  color: var(--base-life-500);
}

.A_tab_life:hover,
.A_tab_life.A_tab_active {
  background-color: var(--base-life-200);
}

.A_tab_career {
  background-color: var(--base-career-100);
  color: var(--base-career-500);
}

.A_tab_career:hover,
.A_tab_career.A_tab_active {
  background-color: var(--base-career-200);
}

.A_tag {
  border-radius: 24rem;
  padding: 6rem 8rem 4rem;
}

.A_tag_health {
  background-color: var(--base-health-100);
  color: var(--base-health-500);
}

.A_tag_finance {
  background-color: var(--base-finance-100);
  color: var(--base-finance-500);
}

.A_tag_home {
  background-color: var(--base-home-100);
  color: var(--base-home-500);
}

.A_tag_docs {
  background-color: var(--base-docs-100);
  color: var(--base-docs-500);
}

.A_tag_life {
  background-color: var(--base-life-100);
  color: var(--base-life-500);
}

.A_tag_career {
  background-color: var(--base-career-100);
  color: var(--base-career-500);
}

.A_search_icon {
  background-color: var(--wb-50);
  border-radius: 8rem;
  width: 44rem;
  height: 44rem;
  background-image: url(images/1af2ae9dc1620d5ddf98.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.A_zoom_icon {
  background-color: var(--wb-50);
  border-radius: 8rem;
  width: 44rem;
  height: 44rem;
  background-image: url(images/7ce0ba5f18e7a4fdf3c2.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.A_flip_icon {
  position: absolute;
  top: 60%;
  left: 89%;
  background-color: var(--wb-50);
  border-radius: 8rem;
  width: 36rem;
  height: 36rem;
  background-image: url(images/e4387091be9615c6b8f3.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.A_social_media_icon {
  width: 48rem;
  height: 48rem;
  background-color: var(--wb-50);
  border-radius: 8rem;
  transition: all ease 0.3s;
  background-repeat: no-repeat;
  background-position: center;
}

.A_social_media_icon.career {
  background-color: var(--base-career-400);
}

.A_vk_icon {
  background-image: url(images/be25809e4c849cf34578.svg);
}

.A_tg_icon {
  background-image: url(images/0ab47f594b0bdd3b3590.svg);
}

.A_vk_icon_white {
  background-image: url(images/9060dfd8f0c62532c315.svg);
}

.A_tg_icon_white {
  background-image: url(images/5044d3ace676c0a35922.svg);
}

.A_social_media_icon:hover {
  background-color: var(--base-500);
  cursor: pointer;
}

.A_social_media_icon.career {
  background-color: var(--base-career-400);
}

.A_social_media_icon.career:hover {
  background-color: var(--base-career-500);
}

.A_social_media_icon.docs {
  background-color: var(--base-docs-400);
}

.A_social_media_icon.docs:hover {
  background-color: var(--base-docs-500);
}

.A_social_media_icon.home {
  background-color: var(--base-home-400);
}

.A_social_media_icon.home:hover {
  background-color: var(--base-home-500);
}

.A_social_media_icon.finance {
  background-color: var(--base-finance-400);
}

.A_social_media_icon.finance:hover {
  background-color: var(--base-finance-500);
}

.A_social_media_icon.life {
  background-color: var(--base-life-400);
}

.A_social_media_icon.life:hover {
  background-color: var(--base-life-500);
}

.A_social_media_icon.health {
  background-color: var(--base-health-400);
}

.A_social_media_icon.health:hover {
  background-color: var(--base-health-500);
}

.A_vk_icon:hover {
  background-image: url(images/9060dfd8f0c62532c315.svg);
}

.A_tg_icon:hover {
  background-image: url(images/5044d3ace676c0a35922.svg);
}

.M_mobile_search .A_close_button {
  position: absolute;
  top: 50rem;
  left: 84%;
}

@media (max-width: 1024px) {
  .A_input {
    width: 350rem;
  }
}

@media (max-width: 768px) {
  .A_button {
    font-size: 18rem;
  }
  .A_tab_categorie {
    border-radius: 12rem;
    padding: 16rem 12rem 12rem;
  }
  .A_input {
    width: 343rem;
  }
  .A_input_search {
    padding: 20rem 16rem 20rem 40rem;
  }
  .A_flip_icon {
    top: 62%;
    left: 87%;
  }
}

.O_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 96rem;
}

.O_search_container {
  z-index: 1000;
  max-height: 85vh;
  overflow-y: auto;
}

.O_menu {
  margin-top: 40rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  height: 51rem;
  width: 100%;
  padding: 0 72rem;
}

.O_header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.O_mobile_menu {
  display: none;
}

.O_footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding: 40rem 72rem;
  border-top: 1px solid var(--wb-50);
}

/* INDEX */

.O_index_banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20rem;
  border-radius: 24rem;
  padding: 40rem;
  width: 1296rem;
  height: 424rem;
  background-color: var(--base-500);
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

.O_index_banner.test {
  background-image: url(images/4367061a84e7cb5a3c6e.svg), url(images/eea21c334729cd046d8b.png);}

.O_index_banner.sub {
  background-image: url(images/4367061a84e7cb5a3c6e.svg), url(images/01a923c8980c9e8820e0.png);
}

/* GUIDES */

.O_guide_body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32rem;
  border-radius: 24rem;
  padding: 40rem;
  width: 74.722vw;
  background-image: url(images/150e577e64dafbe76fb4.svg);
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: center;
}

.O_guides_block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 48rem;
  flex-wrap: wrap;
}


/* END OF THE GUIDES */

/* ARTICLES */

.O_articles_block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 48rem;
  flex-wrap: wrap;
}

.O_articles_collection {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
}

.O_question_block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
  border-radius: 24rem;
  padding: 40rem;
  width: 966rem;
  height: 240rem;
}

.O_ArticlesCollection {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
}

/* END OF THE ARTICLES */

/* DICTIONARY */

.O_glossary_block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48rem;
  width: 100%;
}

.O_glossary_collection {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 20rem;
  width: 100%;
  padding: 0rem 72rem;
}


/* END OF THE DICTIONARY */

@media (max-width: 1024px) {
  .O_menu {
    padding: 0 36rem;
  }
  .O_footer {
    flex-direction: column;
    gap: 40rem;
    padding: 56rem 16rem;
  }
  .O_index_banner {
    gap: 20rem;
    border-radius: 24rem;
    padding: 40rem;
    width: 100%;
    height: 512rem;
  }
}

@media (max-width: 768px) {
  .O_main {
    gap: 40rem;
    margin-top: 60rem;
    padding: 0 16rem;
    width: 100%;
  }
  .O_index_banner {
    gap: 20rem;
    border-radius: 24rem;
    padding: 40rem 8rem;
    width: 100%;
    height: 512rem;
  }
  .M_index_form {
    width: 100%;
    flex-direction: column;
  }
  .M_index_form .A_input, .M_index_form .A_button {
    width: 100%;
  }
  .O_menu {
    margin-top: 20rem;
    padding: 0 16rem;
  }
  .O_mobile_menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .O_footer {
    flex-direction: column;
    gap: 40rem;
    padding: 56rem 16rem;
  }
  .O_guides_list {
    padding: 0rem 16rem;
  }
  .O_guide_body {
    width: 100%;
    padding: 0 16rem;
  }
  .O_articles_collection {
    width: 100%;
  }
  .O_question_block {
    padding: 20rem;
  }
  .O_glossary_collection {
    padding: 0;
  }
}
/* INDEX */

.M_index_card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  gap: 8rem;
  border-radius: 24rem;
  padding: 16rem;
  width: 416rem;
  height: 324rem;
  background-position: center;
  background-image: url(images/4367061a84e7cb5a3c6e.svg);
}

.M_index_cards {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
}

.M_index_form {
  display: flex;
  gap: 8rem;
}


/* SEARCH */

.M_search_result {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4rem;
}

.M_answer_options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8rem;
  max-width: 776rem;
}

.M_question_header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12rem;
}

.M_tab_group {
  display: flex;
  gap: 8rem;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.M_map {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.M_category_score {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: center;
}

.M_navigation_menu {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 20rem;
}

.M_nav_items {
  display: none;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8rem;
  border-radius: 16rem;
  padding: 16rem 0rem;
  width: 116rem;
  background-color: var(--wb-50);
}

.M_nav_items.active {
  display: flex;
  z-index: 1000;
}

.dropdown_icon {
  transition: ease 0.3s;
}

.dropdown_icon.active {
  transform: rotate(180deg);
}

.M_dropdown_menu {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 4rem;
  margin-top: 11rem;
}

.M_category_scores {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4rem;
}

.M_filter_tags {
  display: flex;
  gap: 16rem;
}

.M_mobile_menu_items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8rem;
}

.M_subscription {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 32rem;
}

.M_subscriptionblock {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
}

.M_subscription_form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8rem;
}

.M_footer_menu {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8rem;
}

.M_social_media {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8rem;
}

/* GUIDES */

.M_guide_card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12rem;
  border-radius: 24rem;
  padding: 16rem;
  width: 410rem;
  height: 396rem;
  background-color: var(--wb-50);
}

.M_guide_content_container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12rem;
}

.M_guide_summary_container {
  border-radius: 12rem;
  padding: 16rem;
  width: 996rem;
}

.M_guide_header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12rem;
}

/* END OF THE GUIDES */

/* DICTIONARY */

.M_glossary_card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  width: 410rem;
  height: 356rem;
  position: relative;
}

.M_glossary_preview {
  margin-top: -36rem;
  height: 96rem;
  border-radius: 24rem;
  background-color: var(--wb-50);
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8rem;
  padding: 16rem;
}

/* END OF THE DICTIONARY */

/* ARTICLES */

.M_article_card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12rem;
  width: 410rem;
  height: 386rem;
}

.M_articles_list {
  display: flex;
  gap: 24rem;
  padding: 0rem 72rem;
  flex-wrap: wrap;
}

.M_article_menu {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 286rem;
}

.M_article_content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rem;
  width: 966rem;;
}

ul {
  list-style-type: disc;
  margin-left: 20rem;
}

/* END OF THE ARTICLES */

.M_mobile_search {
  display: none;
  position: fixed;
  backdrop-filter: blur(4px);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  justify-content: flex-start;
  align-items: center;
  padding-top: 120rem;
}
.M_mobile_search.active {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .M_article_content {
    width: 90vw;
  }
  .M_index_card {
    width: 100%;
  }
  .M_footer_menu {
    flex-direction: row;
    order: 1;
    width: 90vw;
    justify-content: space-between;
  }
  .M_subscription {
    order: 2;
    gap: 28rem;
    align-items: center;
  }
  .M_subscription_form {
    flex-direction: column;
  }
  .M_subscription_form .A_button {
    width: 100%;
  }
  .M_social_media_block {
    order: 3;
    gap: 16rem;
  }
  .M_articles_list {
    gap: 20rem;
  }
  .M_guide_summary_container {
    width: auto;
  }
}

@media (max-width: 768px) {
  .M_navigation_menu, .O_menu .A_input_search {
    display: none;
  }
  .M_answer_options {
    width: 100%;
  }
  .M_tab_group {
    width: 100%;
    justify-content: center;
  }
  .M_guide_card {
    width: 91.4vw;
    height: 368rem;
  }
  .M_nav_items.active {
    margin-bottom: -131rem;
  }
  .M_footer_menu {
    flex-direction: row;
    order: 1;
    width: 100%;
    justify-content: space-between;
  }
  .M_subscription {
    order: 2;
    gap: 28rem;
    align-items: center;
  }
  .M_subscription_form {
    flex-direction: column;
  }
  .M_subscription_form .A_button {
    width: 100%;
  }
  .M_social_media_block {
    order: 3;
    gap: 16rem;
  }
  .M_articles_list {
    padding: 0;
  }
  .M_article_card {
    width: 100%;
  }
  .M_guide_header {
    gap: 20rem;
  }
  .M_glossary_preview {
    height: 92rem;
  }
  .M_article_content {
    width: 100%;
  }
  .M_glossary_card {
    width: 90vw;
  }
  .M_index_card {
    width: 100%;
  }
}
/* INDEX */



.C_index_cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24rem;
}

/* SEARCH */

.C_search_results {
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8rem;
  border-radius: 16rem;
  padding: 12rem;
  width: 430rem;
  background-color: var(--wb-50);
}

/* DICTIONARY */

.C_glossary_list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  gap: 24rem;
}

/* GUIDES */


.C_guides_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 24rem;
  padding: 0rem 72rem;
  width: 100%;
}

@media (max-width: 768px) {
  .C_search_results {
    width: 90vw;
    margin-top: 10rem;
    overflow-y: auto
  }
}
* {
  box-sizing: border-box;
}

html {
  font-size: calc(100vw / 1440);
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: 'TTCommons', Arial, Helvetica, sans-serif;
}

/* tablets */
@media (max-width: 1024px) {
  html {
    font-size: calc(100vw / 768);
  }
}

/* mobile */
@media (max-width: 768px) {
  html {
    font-size: calc(100vw / 375);
   }
   .home_guide_body {
    background-color: var(--base-home-50);
   }
}

/* large screens */
@media (min-width: 1920px) {
  html {
    font-size: 1px;
  }
}

.O_cover {
  width: 100%;
  height: 810rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 418rem 0 0 0;
  box-shadow: inset -20px -20px 50px 0 rgba(212, 184, 246, 0.6), inset 20px 20px 50px 0 rgba(212, 184, 246, 0.6);
  background-color: var(--base-500);
  background-image: url(images/83a016bd644fd5578d64.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.A_title_h1 {
  font-size: 156rem;
  color: var(--base-50);
  font-weight: 500;
  text-align: center;
  line-height: 75%;
  letter-spacing: -0.02em;
}
body {
  color: var(--base-500);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 128rem;
  background-color: var(--base-50);
}
.W_nav_container {
  position: sticky;
  top: 45rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 28rem;
  padding: 28rem;
  height: fit-content;
  width: fit-content;
  box-shadow: inset -5rem -5rem 20rem 0 rgba(143, 88, 250, 0.6), inset 5rem 5rem 20rem 0 rgba(143, 88, 250, 0.6);
}
main {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 40rem;
  padding: 0rem 72rem;
  align-items: flex-start;
  flex-direction: row;
  gap: 40rem;
}
.C_nav_items {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.C_nav_items a {
  color: var(--base-500);
  transition: all 0.3s;
}
.C_nav_items a:hover {
  color: var(--base-200);
}
.W_content_container {
  max-width: 855rem;
  display: flex;
  flex-direction: column;
  gap: 128rem;
}
.M_intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 40rem;
}
.M_character_block {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 36rem;
}
.M_character_block img {
  width: 100%;
}
.M_mission_block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 36rem;
}
.C_values-cards {
  display: flex;
  gap: 24rem;
}
.M_value-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: 24rem;
  border-radius: 28rem;
  padding: 28rem;
  box-shadow: inset -5rem -5rem 20rem 0 rgba(143, 88, 250, 0.6),
    inset 5rem 5rem 20rem 0 rgba(143, 88, 250, 0.6);
}
.M_value-card .title_h5 {
  color: var(--base-500);
}
.W_intro_info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 36rem;
}
.M_info_text {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8rem;
  flex-basis: 50%;
}
.W_values_block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 36rem;
}
.C_logo_info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 24rem;
}
.C_logo_info p {
  flex-basis: 50%;
}
.W_logo_block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 24rem;
}
.M_logo_vars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 40rem;
  width: 100%;
  height: 441rem;
  box-shadow: inset -10px -10px 40px 0 rgba(143, 88, 250, 0.6), inset 10px 10px 40px 0 rgba(143, 88, 250, 0.6);
  padding: 40rem;
  gap: 46rem;
}
.C_logo_vars {
  display: flex;
  gap: 40rem;
}
.C_logo_descr {
  display: flex;
  gap: 24rem;
}
.C_logo_descr p {
  flex-basis: 50%;
}
.C_logo_cat_vars {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 24rem;
  width: 100%;
}
.M_logo_var {
  flex-basis: 50%;
  width: 100%;
  border-radius: 28rem;
  padding: 28rem;
  height: 292rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16rem;
}
.M_logo_var.finance {
  box-shadow: inset -5px -5px 20px 0 rgba(255, 174, 0, 0.6), inset 5px 5px 20px 0 rgba(255, 174, 0, 0.6);
  background: var(--base-finance-50);
}
.M_logo_var.home {
  box-shadow: inset -5px -5px 20px 0 rgba(233, 75, 152, 0.6), inset 5px 5px 20px 0 rgba(233, 75, 152, 0.6);
  background: var(--base-home-50);
}
.text_m_medium.finance {
  color: var(--base-finance-500);
}
.text_m_medium.home {
  color: var(--base-home-500);
}
.W_palette {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 40rem;
}
.main-palette .title_h5 {
  color: var(--base-500);
}
.C_palette_info {
  display: flex;
  gap: 24rem;
}
.C_palette_info p {
  flex-basis: 50%;
}
.C_palette_block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 24rem;
}
.A_palette_block {
  flex-basis: 48%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  padding: 28rem;
  height: 250rem;
  width: 100%;
  border-radius: 28rem;
}
.W_main_palette {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 36rem;
}
.logo-example {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24rem;
}
.logo-example-block-1 {
  box-shadow: inset -10px -10px 40px 0 #eaddfb, inset 10px 10px 40px 0 #eaddfb;
  height: 441rem;
  width: 100%;
  border-radius: 40rem;
  background-image: url(images/37f272c36600074181e9.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.logo-example-block {
  display: flex;
  gap: 24rem;
  width: 100%;
  flex-wrap: wrap;
}
.logoex-2 {
  height: 415rem;
  width: 100%;
  background-image: url(images/4ae10b5340d52152d747.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 40rem;
  box-shadow: inset -5px -5px 20px 0 #eaddfb, inset 5px 5px 20px 0 #eaddfb;
  flex-basis: 50%;
}
.logoex-3 {
  height: 415rem;
  width: 100%;
  background-image: url(images/665551e586abc6eac95c.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 40rem;
  box-shadow: inset -5px -5px 20px 0 #eaddfb, inset 5px 5px 20px 0 #eaddfb;
  flex-basis: 50%;
}
.graph-block-2 {
  height: 415rem;
  width: 100%;
  background-image: url(images/d3702a5a17f4064034d1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 40rem;
  box-shadow: inset -5px -5px 20px 0 #eaddfb, inset 5px 5px 20px 0 #eaddfb;
  flex-basis: 50%;
}
.graph-block-3 {
  height: 415rem;
  width: 100%;
  background-image: url(images/166ac6699fa8e9fc29f5.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 40rem;
  box-shadow: inset -5px -5px 20px 0 #eaddfb, inset 5px 5px 20px 0 #eaddfb;
  flex-basis: 50%;
}
.A_palette_block.block_1 {
  border: 1px solid var(--base-500);
}
.A_palette_block.block_2 {
  background-color: var(--base-500);
  color: var(--base-50);
}
.A_palette_block.block_2 .title_h5 {
  color: var(--base-50);
}
.A_palette_block.block_3 {
  background-color: var(--base-100);
}
.A_palette_block.block_4 {
  background-color: var(--base-200);
}
.A_palette_block.block_1 .title_h5 {
  color: var(--base-500);
}
.A_palette_block.block_3 .title_h5 {
  color: var(--base-500);
}
.A_palette_block.block_4 .title_h5 {
  color: var(--base-500);
}
.W_cat_palette {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 36rem;
}
.W_cat_palette .title_h5 {
  color: var(--base-500);
}
.C_cat_palette_info {
  display: flex;
  gap: 24rem;
}
.C_cat_palette_info p {
  flex-basis: 50%;
}
.palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24rem;
}
.palette-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
}
.palette-blocks div {
   width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  border-radius: 28rem;
  flex-basis: 30%;
  padding: 28rem;
}
.A_palette_accent {
  height: 258rem;
}
.A_palette_secondary {
  height: 188rem;
}
.palette-blocks div:nth-of-type(1) {
  background-color: #e94b98;
}
.palette-blocks div:nth-of-type(2) {
  background-color: #ea9400;
}
.palette-blocks div:nth-of-type(3) {
  background-color: #64b032;
}
.palette-blocks div:nth-of-type(4) {
  box-shadow: inset 8rem 8rem 16rem 0 rgba(233, 75, 152, 0.25),
    inset -8rem -8rem 16rem 0 rgba(233, 75, 152, 0.25);
  background: #fdf2f8;
}
.palette-blocks div:nth-of-type(5) {
  box-shadow: inset 8rem 8rem 16rem 0 rgba(218, 149, 0, 0.25),
    inset -8rem -8rem 12rem 0 rgba(218, 149, 0, 0.25);
  background: #fffdea;
}
.palette-blocks div:nth-of-type(6) {
  box-shadow: inset 8rem 8rem 16rem 0 rgba(100, 176, 50, 0.25),
    inset -8rem -8rem 12rem 0 rgba(100, 176, 50, 0.25);
  background: #f3faeb;
  color: #64b032;
}
.palette-blocks div:nth-of-type(7) {
  background: #09a0ee;
}
.palette-blocks div:nth-of-type(8) {
  background: #484be7;
}
.palette-blocks div:nth-of-type(9) {
  background: #f4583f;
}
.palette-blocks div:nth-of-type(10) {
  box-shadow: inset 8rem 8rem 16rem 0 rgba(9, 160, 238, 0.25),
    inset -8rem -8rem 16rem 0 rgba(9, 160, 238, 0.25);
  background: #fdf2f8;
}
.palette-blocks div:nth-of-type(11) {
  box-shadow: inset 8rem 8rem 16rem 0 rgba(72, 75, 231, 0.25),
    inset -8rem -8rem 12rem 0 rgba(72, 75, 231, 0.25);
  background: #f5f3ff;
}
.palette-blocks div:nth-of-type(12) {
  box-shadow: inset 8rem 8rem 16rem 0 rgba(244, 88, 63, 0.25),
    inset -8rem -8rem 12rem 0 rgba(244, 88, 63, 0.25);
  background: #fef4f2;
}

.text_l_medium.home-50, .title_h5.home-50 {
  color: var(--base-home-50);
}
.text_l_medium.career-50, .title_h5.career-50 {
  color: var(--base-career-50);
}
.text_l_medium.health-50, .title_h5.health-50 {
  color: var(--base-health-50);
}
.text_l_medium.life-50, .title_h5.life-50 {
  color: var(--base-life-50);
}
.text_l_medium.docs-50, .title_h5.docs-50 {
  color: var(--base-docs-50);
}
.text_l_medium.finance-50, .title_h5.finance-50 {
  color: var(--base-finance-50);
}

.text_l_medium.home-500, .title_h5.home-500 {
  color: var(--base-home-500);
}
.text_l_medium.career-500, .title_h5.career-500 {
  color: var(--base-career-500);
}
.text_l_medium.health-500, .title_h5.health-500 {
  color: var(--base-health-500);
}
.text_l_medium.life-500, .title_h5.life-500 {
  color: var(--base-life-500);
}
.text_l_medium.docs-500, .title_h5.docs-500 {
  color: var(--base-docs-500);
}
.text_l_medium.finance-500, .title_h5.finance-500 {
  color: var(--base-finance-500);
}
.C_typo_info {
  display: flex;
  gap: 24rem;
}
.C_typo_info p {
  flex-basis: 50%;
}
.M_typo_example {
  box-shadow: inset -10px -10px 40px 0 #eaddfb, inset 10px 10px 40px 0 #eaddfb;
  background: var(--base-500);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 84rem;
  width: 100%;
  height: 441rem;
  border-radius: 40rem;
  padding: 44rem;
}
.W_main_palette .title_h5 {
  color: var(--base-500);
}
.typo_ex_1 {
  font-weight: 600;
  font-size: 128rem;
  color: var(--base-100);
}
.typo_ex_2 {
  font-weight: 400;
  font-size: 64rem;
  color: var(--base-100);
}
.M_typo_example .text_m {
  color: var(--base-100);
}
.C_typo_examples {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.W_graphics {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 40rem;
}
.C_graphics_info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: 24rem;
}
.C_graphics_info p {
  flex-basis: 50%;
}
.graph-blocks {
  display: flex;
  gap: 24rem;
  flex-wrap: wrap;
}
.graph-block-1 {
  box-shadow: inset -10px -10px 40px 0 rgba(212, 184, 246, 0.6), inset 10px 10px 40px 0 rgba(212, 184, 246, 0.6);
  background-color: var(--base-500);
  border-radius: 40rem;
  height: 324rem;
  background-image: url(images/6770d70f990faafa0c11.png);
  background-size: cover;
  background-position: center;
}
.graph-block-2, .graph-block-3 {
  box-shadow: inset -5px -5px 20px 0 #eaddfb, inset 5px 5px 20px 0 #eaddfb;
  width: 100%;
  height: 415rem;
  border-radius: 28rem;
}
.W_graphics_container {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.ill_block {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 24rem;
}
.ills_block {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24rem;
}
.ill_info {
  display: flex;
  gap: 24rem;
}
.ill_info p {
  flex-basis: 50%;
}
.illustration {
  border-radius: 40rem;
  width: 100%;
  height: 441rem;
  box-shadow: inset -10px -10px 40px 0 var(--base-home-50), inset 10px 10px 40px 0 var(--base-home-50);
  background-image: url(images/e944948759e544b95ec1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.ill_1 {
  width: 500rem;
  height: 415rem;
  box-shadow: inset -5px -5px 20px 0 var(--base-finance-50), inset 5px 5px 20px 0 var(--base-finance-50);
  background-image: url(images/b68d45cebd2094a49cd6.png);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24rem;
  background-size: cover;
}
.ill_2 {
  width: 332rem;
  height: 415rem;
  box-shadow: inset -5px -5px 20px 0 var(--base-life-50), inset 5px 5px 20px 0 var(--base-life-50);
  background-image: url(images/86caef042e9c8950aea2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 24rem;
}

@media screen and (max-width: 1280px) {
  body {
    flex-direction: column;
    gap: 60rem;
  }
  .W_nav_container {
    display: none;
  }
  .O_cover {
    width: 100%;
    height: 600rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 234rem 0 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/81c061bc004235d8a18e.png);
  }
  main {
    margin-bottom: 60rem;
    padding: 0rem 16rem;
    gap: 40rem;
  }
  .W_content_container {
    width: 100%;
    gap: 40rem;
  }
  .M_intro {
    gap: 40rem;
  }
  .C_typo_examples {
    gap: 32rem;
  }
  .M_mission_block {
    gap: 20rem;
  }
  .M_character_block {
    gap: 20rem;
  }
  .W_intro_info {
    gap: 24rem;
  }
}

@media screen and (max-width: 780px) {
  body {
    flex-direction: column;
    gap: 60rem;
  }
  .W_nav_container {
    display: none;
  }
  main {
    margin-bottom: 60rem;
    padding: 0rem 16rem;
    gap: 40rem;
  }
  .W_content_container {
    width: 100%;
    gap: 28rem;
  }
  .W_intro_info {
    flex-direction: column;
  }
  .C_logo_descr {
    flex-direction: column;
  }
  .M_intro {
    gap: 28rem;
  }
  .C_typo_examples {
    gap: 20rem;
  }
  .M_character_block {
    gap: 16rem;
  }
  .M_mission_block {
    gap: 16rem;
  }
  .W_intro_info {
    flex-direction: column;
    gap: 28rem;
  }
  .C_logo_vars {
    display: flex;
    flex-direction: column;
    gap: 12rem;
  }
  .C_logo_vars img {
    width: 157rem;
  }
  .M_logo_vars {
    border-radius: 24rem;
    height: 474rem;
    padding: 32rem;
    gap: 18rem;
  }
  .C_logo_info {
    flex-direction: column;
  }
  .A_title_h1 {
    font-size: 68rem;
  }
   .C_values-cards, .C_typo_info, .C_logo_cat_vars, .C_graphics_info,
   .ill_info, .ills_block, .C_cat_palette_info {
    flex-direction: column;
  }
  .palette-blocks {
    width: 100%;
  }
  .A_palette_accent {
    height: 258rem;
    padding: 16rem;
  }
  .logoex-2, .logoex-3 {
    flex-basis: 100%;
  }
  .A_palette_secondary {
    height: 188rem;
    padding: 16rem;
  }
  .M_typo_example {
    height: 351rem;
  }
  .palette-blocks div, .graph-block-2, .graph-block-3 {
    flex-basis: 100%;
  }
  .A_palette_block {
    width: 100%;
    flex-basis: 100%;
  }
  .ill_1 {
    width: 100%;
  }
  .typo_ex_1 {
    font-size: 60rem;
  }
  .typo_ex_2 {
    font-size: 32rem;
  }
  .graph-block-1, .graph-block-2, .graph-block-3, .ill_1, .ill_2, .illustration {
    border-radius: 24rem;
  }
  .M_value-card {
    padding: 16rem;
    width: 100%;
    height: 160rem;
  }
  .W_values_block, .C_values-cards {
    width: 100%;
  }
}