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;
}

@font-face {
  font-family: "Cygre";
  src: url(fonts/5b1cf00321de92cead00.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cygre";
  src: url(fonts/8875a256928c885d8e79.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cygre";
  src: url(fonts/4c89a0b0a449cad019a6.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-background: #071a12;
  --color-surface: #0d281b;
  --color-card: #133524;
  --color-card-accent: #1f5a3c;
  --color-tag: #2d4e1e;
  --color-text: #ffffff;
  --color-button: #c6ff3d;
  --font-family: "Cygre", sans-serif;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
}

/* 1. BASE (reset, body, html) */
*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-background);
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

button,
input {
  color: currentColor;
  font-family: inherit;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

input[type="email"] {
  width: 400rem;
  height: 50rem;
  padding: 8rem 25rem;
  border-radius: 64rem;
  border: 1.2rem solid var(--color-text);
  background-color: transparent;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  outline: none;
  font-size: 18rem;
  transition: background-color 0.2s ease;
}

input[type="email"]:hover {
  background-color: var(--color-card);
}

input[type="email"]::placeholder {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  font-size: 18rem;
}
#my-form {
  display: flex;
  gap: 10rem;
}
#my-form-button {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 50rem;
  min-height: 50rem;
  border-radius: 50%;
  border: 1.2rem solid var(--color-text);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#my-form-button:hover {
  background-color: var(--color-card);
}

#my-form-status {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  font-size: 18rem;
  text-align: center;
  background-color: transparent;
}

/* Общие стили */
.Q_LogoImage {
  display: block;
  width: 19.03rem;
  height: auto;
}

.Q_SearchIcon {
  display: block;
  width: 17rem;
  height: auto;
}
.Q_IconSearchClose {
  display: block;
  width: 30rem;
  height: auto;
}

.Q_SearchArrow {
  width: 30rem;
  height: 30rem;
  background-image: url(images/Q_Icon_Arrow-White.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.Q_Highlight {
  color: var(--color-text);
}

.Q_TagIconImg {
  display: block;
  width: 30rem;
  height: 30rem;
}

.Q_TagIcon-Social-Network {
  display: block;
  width: 38rem;
  height: auto;
}

.Q_ButtonIcon {
  display: block;
  width: 44rem;
  height: auto;
}
/* ___________________index.html___________________ */

/* ___________________interactive.html___________________ */
.Q_TestCardImg {
  display: block;
  width: 300rem;
  height: auto;
  border-radius: 25rem;
}

.Q_TagItemImg {
  display: block;
  width: 19rem;
  height: auto;
}

.Q_ArrowIcon {
  display: block;
  width: 30rem;
  height: auto;
}

.Q_ArrowIconSecondary {
  display: block;
  width: 50rem;
  height: auto;
}

/* ___________________test_ForestExam.html___________________ */
.Q_AnswerIcon {
  display: block;
  width: 27rem;
  height: auto;
}

/* ___________________result_ForestExam.html___________________ */
.Q_ResultChartImg {
  display: block;
  width: 215rem;
  height: auto;
  grid-area: diagram;
  align-self: start;
}

/* Общие стили */
.A_Heading-H1,
.A_Heading-H2,
.A_Heading-H2-medium,
.A_Heading-H3,
.A_Heading-H4,
.A_Heading-H5,
.A_Paragraph,
.A_ParagraphVar,
.A_AnswerDescription,
.A_QuestionText,
.A_NavigationText,
.A_ButtonText,
.A_Tag-Text,
.A_ResultTitle {
  font-family: var(--font-family);
  color: var(--color-text);
}

/* Bold */
.A_Heading-H1,
.A_Heading-H2 {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
.A_ResultTitle {
  font-weight: var(--font-weight-bold);
}

/* Medium */
.A_Heading-H3,
.A_Heading-H5,
.A_Heading-H2-medium {
  font-weight: var(--font-weight-medium);
}

/* Regular */
.A_Heading-H4,
.A_Paragraph,
.A_ParagraphVar,
.A_AnswerDescription,
.A_QuestionText,
.A_NavigationText,
.A_ButtonText,
.A_Tag-Text {
  font-weight: var(--font-weight-regular);
}

/* Размеры */
.A_Heading-H1 {
  font-size: 50rem;
}
.A_Heading-H2,
.A_Heading-H2-medium {
  font-size: 36rem;
}

.A_Heading-H3 {
  font-size: 28rem;
  line-height: 1.3;
}

.A_Heading-H4 {
  font-size: 24rem;
}
.A_Heading-H5,
.A_ResultTitle {
  font-size: 20rem;
  line-height: 1.5;
}

.A_Paragraph,
.A_AnswerDescription {
  font-size: 20rem;
  line-height: 1.5;
  text-decoration: none;
}

.A_ParagraphVar,
.A_QuestionText {
  font-size: 16rem;
  line-height: 1.5;
}

.A_NavigationText,
.A_ButtonText {
  font-size: 18rem;
  text-decoration: none;
}

.A_Tag-Text {
  font-size: 14rem;
}

.A_AnswerDescription,
.A_QuestionText {
  opacity: 50%;
}

.A_Logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
  text-decoration: none;
  background-color: var(--color-surface);
  transition: background-color 0.2s ease;
}

.A_Logo:hover {
  background-color: var(--color-card);
}

.A_Search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
  text-decoration: none;
  border: none;
  background-color: var(--color-surface);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.A_Search:hover {
  background-color: var(--color-card);
}

.A_Search.is-hidden {
  display: none;
}

.A_SearchInput {
  width: 152rem;
  background-color: var(--color-surface);
  border: none;
}

.A_SearchInput:focus {
  outline: none;
}

.A_SearchButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rem;
  min-height: 30rem;
  border-radius: 50%;
  border: none;
  background-color: var(--color-surface);
  cursor: pointer;
}

.A_SearchButton:hover {
  background-color: var(--color-card);
}

.A_Tag {
  padding: 15rem 25rem;
  border-radius: 64rem;
  border: 1.5rem solid var(--color-text);
}

.A_Link {
  text-decoration: none;
}

.A_ButtonText {
  color: var(--color-card);
}

.A_Button {
  background-color: var(--color-button);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.A_Button:hover {
  background-color: var(--color-text);
}

.A_Social-Network {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rem;
  min-height: 50rem;
  border-radius: 50%;
  border: 1.5rem solid var(--color-text);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.A_Social-Network:hover {
  background-color: var(--color-card);
}

/* ___________________interactive.html___________________ */
.A_TestCard_image-iphone {
  display: none;
}

.A_TestCardButton {
  display: flex;
  justify-content: center;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  border: none;
}

.A_TestButton {
  display: flex;
  justify-content: center;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  border: none;
}

/* ___________________main_ForestExam.html___________________ */

.A_ButtonTest {
  display: flex;
  align-items: center;
  padding-left: 70rem;
  gap: 40rem;
  border-radius: 70rem;
  border: none;
  min-height: 50rem;
}

/* ___________________test_ForestExam.html___________________ */

.A_ProgressStep {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
  padding: 0;
  border: 1.5rem solid var(--color-text);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  box-sizing: border-box;
  cursor: pointer;
}

.A_ProgressStep.is-active {
  background: var(--color-text);
  color: var(--color-card);
}

.A_ProgressStep::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 32rem;
  height: 1.5rem;
  background: var(--color-text);
  transform: translateY(-50%);
}

.A_ProgressStep:last-child::after {
  display: none;
}

.A_ProgressStep.is-completed {
  background: var(--color-text);
  color: var(--color-card);
}

/* ___________________result_ForestExam.html___________________ */
.A_ResultPercent {
  grid-area: diagram;
  align-self: center;
}

.A_ButtonTryAgain {
  display: flex;
  align-items: center;
  padding-left: 40rem;
  gap: 10rem;
  border-radius: 70rem;
  border: none;
  min-height: 50rem;
}

/* ___________________index.html___________________ */
.A_State_img {
  display: block;
  width: 41rem;
  height: auto;
}

.A_ForestState {
  display: block;
  width: 39rem;
  height: auto;
  padding-top: 25rem;
}

.A_ForestState-Sky {
  display: block;
  width: 39rem;
  height: auto;
}

.A_ForestStateVar {
  display: block;
  width: 18rem;
  height: auto;
  padding-top: 25rem;
}

.A_Tag-Text_State {
  padding-top: 13rem;
}

.A_ForestState-Other {
  display: block;
  width: 18rem;
  height: auto;
}

.A_ForestState-Mite {
  display: block;
  width: 28rem;
  height: auto;
}

.A_Tag-Text-Dampness {
  padding-left: 30rem;
}

.A_Tag-Text-Fire {
  padding-left: 10rem;
}

.A_Tag-Text-Insect {
  padding-left: 68rem;
}

.A_Tag-Text-Mite {
  padding-left: 113rem;
}

.A_Button-ForestState {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 100rem;
  width: 353rem;
  min-height: 50rem;
  border: none;
  border-radius: 71rem;
}

.A_TestCard_ContentVar {
  display: block;
  width: 27rem;
  height: auto;
}

.A_Button-MainArticle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 60rem;
  width: 267rem;
  min-height: 50rem;
  border: none;
  border-radius: 71rem;
}

.A_TestCardList_image {
  display: block;
  min-height: auto;
}
.A_TestCardList_image-iphone {
  display: none;
}
.A_Button-Dzen {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 45rem;
  min-height: 45rem;
  border: 1.5rem solid var(--color-text);
  border-radius: 50%;
  cursor: pointer;
}

.A_Button-Dzen-img {
  display: block;
  width: 20rem;
  height: auto;
}

.A_Articles-CardList-Arrow {
  display: none;
}

/* ___________________404.html___________________ */
.A_Heading-NotFound {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 300rem;
}

/* ___________________articles.html___________________ */
.A_Header-Filter-IconImage {
  display: block;
  width: 20rem;
  height: auto;
}

.A_Tag-TextDownload {
  color: var(--color-card);
}

.A_Download-Image {
  display: block;
  width: 12rem;
  height: auto;
  pointer-events: none;
}

.A_Articles-Link {
  text-decoration: none;
}

.A_Articles-Link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.A_Icon-Arrow {
  display: block;
  width: 20.76rem;
  height: auto;
}

/* ___________________article_name.html___________________ */
.A_Link-Download {
  align-self: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 8vh;
}

.A_Paragraph-padding-bottom {
  padding-bottom: 20rem;
}

.A_ForestState-Article {
  display: block;
  width: 20rem;
  min-height: auto;
}

.A_Tag-Text-Article {
  padding-bottom: 15rem;
  text-align: center;
}

.A_Paragraph-padding-top {
  padding-top: 20rem;
}

.A_ForestState-SkyVar {
  width: 22rem;
}

.A_Article-Important-img {
  display: block;
  width: 40rem;
  min-height: auto;
}

.A_Article-Important-imgVar {
  display: block;
  width: 20rem;
  min-height: auto;
}
.A_Article-Info-Stat-Card {
  padding-top: 70rem;
}
.A_Article-Info-Stat-Card-DirectionVar {
  padding-top: 60rem;
}

.A_Article-Info-Stat-Card-Ravine {
  padding-top: 90rem;
}
.A_Article-Info-Stat-Card-Mountain {
  padding-top: 72rem;
}
.A_Article-Info-Stat-Card-RavineVar {
  padding-top: 95rem;
}
.A_Article-Info-Stat-Card-Dampness {
  padding-top: 80rem;
}
.A_Article-Info-Stat-Card-Grass {
  padding-top: 80rem;
}
.A_Article-Info-Stat-Card-Sheets {
  padding-top: 80rem;
}
.A_Article-Info-Stat-Card-WateringCan {
  padding-top: 85rem;
}
.A_Article-Info-Stat-Card-Forest {
  padding-top: 65rem;
}
.A_Article-Big-img {
  width: 900rem;
  min-height: 250rem;
  border-radius: 15rem;
}

/* Общие стили */
.M_Navigation {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.M_NavigationMenu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10rem;
}

.M_NavigationItem {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 20rem;
  list-style: none;
  border-radius: 43rem;
  background-color: var(--color-surface);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.M_NavigationItem--active {
  background-color: var(--color-card-accent);
}

.M_NavigationItem:hover {
  background-color: var(--color-card);
}

.M_NavigationItem--active:hover {
  background-color: var(--color-card-accent);
}

.M_SearchInput {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rem;
  height: 35rem;
  padding: 2.5rem 2.5rem 2.5rem 10rem;
  border-radius: 43rem;
  background-color: var(--color-surface);
}

.M_SearchResult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36rem;
  padding-left: 10rem;
  border-radius: 46rem;
  font-family: var(--font-family);
  color: var(--color-text);
  font-weight: var(--font-weight-regular);
  font-size: 16rem;
  text-decoration: none;
  transition: background-color 0.1s ease;
}

.M_SearchResult:hover {
  background-color: var(--color-card);
}

.M_SearchDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10rem);
  right: 0;
  z-index: 10;
  flex-direction: column;
  width: 232rem;
  min-height: 36rem;
  gap: 5rem;
  padding: 10rem;
  background-color: var(--color-surface);
  border-radius: 25rem;
}

.M_HeroContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40rem;
}

.M_TagGroup {
  display: flex;
  align-items: center;
}

.M_TagIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rem;
  min-height: 50rem;
  border-radius: 50%;
  border: 1.5rem solid var(--color-text);
  flex: 0 0 50rem;
}

.M_Button {
  background-color: var(--color-button);
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.M_Button:hover {
  background-color: var(--color-text);
}

.M_Footer-Area {
  display: flex;
  flex-direction: column;
  gap: 60rem;
}

.M_Footer-Subscribe {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}

.M_Footer-Section {
  display: flex;
  gap: 40rem;
}

.M_Footer-Column {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.M_Footer-List {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* ___________________interactive.html___________________ */
.M_TestCardTags {
  display: flex;
  justify-content: space-between;
  padding-top: 5rem;
}

.M_TestCardDescription {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.M_LearnMoreCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem;
  padding-bottom: 20rem;
  gap: 20rem;
  background-color: var(--color-card);
  border-radius: 25rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.M_LearnMoreCard:hover {
  background-color: rgba(19, 53, 36, 0.7);
}
/* ___________________main_ForestExam.html___________________ */
.M_HeroContentTitle {
  display: flex;
  flex-direction: column;
  gap: 15rem;
}

/* ___________________test_ForestExam.html___________________ */

.M_Progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rem;
}

.M_AnswerCard {
  display: flex;
  flex-direction: column;
  padding: 20rem;
  gap: 20rem;
  width: 670rem;
  min-height: 133rem;
  background-color: var(--color-card);
  border-radius: 25rem;
  border: none;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.M_AnswerCard.is-selected {
  background-color: var(--color-card-accent);
}

.M_AnswerCard:hover {
  background-color: rgba(19, 53, 36, 0.7);
}

.M_AnswerHeader {
  display: flex;
  align-items: center;
  gap: 15rem;
}

/* ___________________result_ForestExam.html___________________ */
.M_ResultCard {
  display: flex;
  flex-direction: column;
  gap: 30rem;
  border-radius: 25rem;
  padding: 20rem;
  width: 660rem;
  height: auto;
  background-color: var(--color-card);
}

.M_ResultChart {
  display: grid;
  grid-template-areas: "diagram";
  justify-content: center;
}

.M_ResultContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: 100%;
  gap: 5rem;
}

.M_CorrectAnswerCard {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20rem;
  gap: 30rem;
  width: 100%;
  min-height: 180rem;
  background-color: var(--color-card);
  border-radius: 15rem;
}

.M_CorrectAnswerContent {
  display: flex;
  flex-direction: column;
  gap: 15rem;
}

/* ___________________index.html___________________ */
.M_State {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}

.M_State-Sunset {
  padding-left: 600rem;
}

.M_Passability-Index {
  align-self: flex-start;
  display: flex;
  gap: 40rem;
}

.M_StateVar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}

.M_State-Permafrost {
  padding-left: 25rem;
  padding-top: 60rem;
}
.M_State-Dampness-Main {
  padding-left: 10rem;
  padding-top: 80rem;
}
.M_State-Dampness {
  padding-left: 25rem;
  padding-top: 125rem;
}
.M_State-DampnessVar {
  padding-left: 10rem;
  padding-top: 80rem;
}
.M_State-Slush {
  padding-left: 18rem;
  padding-top: 25rem;
}

.M_State-Dirt {
  position: relative;
  padding-left: 30rem;
  margin: -12rem;
}

.M_StateSky {
  display: flex;
  padding-top: 15rem;
  padding-left: 10rem;
  align-items: center;
  gap: 27rem;
}

.M_StateCloudy {
  display: flex;
  padding-top: 22rem;
  padding-left: 65rem;
  align-items: center;
  gap: 27rem;
}

.M_ForestSky-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}

.M_StateAutumn {
  display: flex;
  padding-top: 24rem;
  padding-left: 212rem;
  align-items: center;
  gap: 27rem;
}

.M_State-Other {
  display: flex;
  align-items: center;
  gap: 10rem;
}

.M_Card-CheckList-biotopes {
  display: flex;
  align-items: center;
  padding-top: 160rem;
  gap: 30rem;
  min-height: 263rem;
  width: 263rem;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(ec73982d91fbb52febdc.webp);
}

.M_Card-CheckList-biotopes:hover {
  background-image: url(25fb735071b9fcdbf4ed.webp);
}

.M_Card-CheckList-trail {
  display: flex;
  align-items: center;
  padding-top: 32rem;
  gap: 145rem;
  min-height: 263rem;
  width: 207rem;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(725839556e881b4330c8.webp);
}

.M_Card-CheckList-trail:hover {
  background-image: url(2237628b5934283dcf05.webp);
}

.M_Card-CheckList-seasons {
  display: flex;
  align-items: center;
  padding-top: 160rem;
  gap: 30rem;
  min-height: 263rem;
  width: 263rem;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(5a3754de7b6d03216be4.webp);
}

.M_Card-CheckList-seasons:hover {
  background-image: url(be1c4907ad06c59d537b.webp);
}

.M_Card-CheckList-compass {
  display: flex;
  align-items: center;
  padding-top: 35rem;
  padding-left: 40rem;
  gap: 145rem;
  min-height: 263rem;
  width: 258rem;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(10d9441dcd9eeda97352.webp);
}

.M_Card-CheckList-compass:hover {
  background-image: url(83962254e96621b86ee8.webp);
}

.M_Card-CheckList-ticks {
  display: flex;
  align-items: center;
  padding-top: 32rem;
  gap: 145rem;
  min-height: 263rem;
  width: 207rem;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(eac85cf744c092609816.webp);
}

.M_Card-CheckList-ticks:hover {
  background-image: url(8f8764a712243e6bf10a.webp);
}

.M_Section-MainContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5rem;
}

.M_Articles-CardList {
  display: flex;
  justify-content: end;
  padding: 10rem;
  width: 297rem;
  min-height: 173rem;
  border-radius: 10rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: none;
}

.M_Articles-CardLis-storm {
  background-image: url(9c0e678b05ad6b9bcdc3.webp);
}

.M_Articles-CardLis-boletus {
  background-image: url(c54e6a90d489a46f2bfd.webp);
}

.M_Articles-CardLis-fox {
  background-image: url(89a196be479b82afb54c.webp);
}

.M_Articles-CardLis-bonfire {
  background-image: url(5055e1f85690a3a52b9f.webp);
}

.M_Section_Dzen-Content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rem;
}

.M_Articles-CardMedia-Anxiety.visible {
  background-image: url(87f4b727d6b83df2120f.webp);
}

.M_Articles-CardMedia-Routes.visible {
  background-image: url(a57d0b152d1853579222.webp);
}

.M_Articles-CardMedia-Atmosphere.visible {
  background-image: url(b9585490f76d1b2ccf08.webp);
}

.M_burger-icon {
  display: none;
}
/* ___________________404.html___________________ */
.M_HeroContent-NotFound {
  gap: 0;
}
.M_TagGroup-NotFound {
  padding-top: 0;
}
/* ___________________articles.html___________________ */
.M_HeroContent-articles {
  gap: 20rem;
}

.M_Header-Toolbar {
  display: flex;
  justify-content: space-between;
}

.M_Header-FilterButton {
  display: flex;
  align-items: center;
  gap: 10rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.M_Header-Filter-Icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  min-height: 40rem;
  border-radius: 50%;
  background-color: var(--color-button);
}

.M_Header-FilterGroup {
  display: none;
  flex-direction: column;
  gap: 15rem;
}

.M_Header-FilterGroup.open {
  display: flex;
}

.M_Header-FilterGroup-Tegs {
  display: flex;
  gap: 10rem;
}

.M_TagItem {
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 0 15rem;
  height: 30rem;
  border-radius: 52rem;
  user-select: none;
}

.M_TagItem-filter {
  background-color: rgba(45, 78, 30, 0.3);
  cursor: pointer;
}

.M_TagItem-filter:hover {
  background-color: rgba(45, 78, 30, 0.6);
  cursor: pointer;
}

.M_TagItem-filter.active {
  background-color: var(--color-tag);
}

.M_Articles-ticks.visible {
  background-image: url(9ed292b6284bd5d06bff.webp);
}
.M_Articles-storm.visible {
  background-image: url(9c0e678b05ad6b9bcdc3.webp);
}
.M_Articles-compass.visible {
  background-image: url(0cfd1359b4a51af7587e.webp);
}
.M_Articles-trail.visible {
  background-image: url(2c7ca07ddfc6ab145082.webp);
}
.M_Articles-backpack.visible {
  background-image: url(ee84da4c1ac4b8ce0ce0.webp);
}
.M_Articles-clothing.visible {
  background-image: url(981aee85f252e8424291.webp);
}
.M_Articles-bonfire.visible {
  background-image: url(5055e1f85690a3a52b9f.webp);
}
.M_Articles-tea.visible {
  background-image: url(876b847297de91e5dbb0.webp);
}
.M_Articles-seasons.visible {
  background-image: url(5c47bf44968a55e8d5f1.webp);
}
.M_Articles-biotopes.visible {
  background-image: url(0de40f984989386891a6.webp);
}
.M_Articles-boletus.visible {
  background-image: url(c54e6a90d489a46f2bfd.webp);
}
.M_Articles-fox.visible {
  background-image: url(89a196be479b82afb54c.webp);
}

.M_TagItem--active {
  background-color: var(--color-tag);
}

.M_Articles-CardContent {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.M_Articles-CardFooter {
  display: flex;
  justify-content: space-between;
  padding-top: 10rem;
}

.M_Download-Button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  border: none;
  gap: 10rem;
  background-color: var(--color-button);
  text-decoration: none;
}

.M_Button-more {
  align-self: center;
  width: 267rem;
  min-height: 50rem;
  border: none;
  border-radius: 71rem;
}

/* ___________________article_name.html___________________ */

.M_Main_Article-Header {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 35rem;
}

.M_Main_Article-Header-tegs {
  display: flex;
  gap: 10rem;
}

.M_Article-Info {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.M_State-Body {
  position: relative;
  left: -5rem;
  padding-top: 125rem;
}
.M_State-Winter {
  position: relative;
  left: 10rem;
  padding-top: 100rem;
}
.M_State-BodyVarImg {
  padding-left: 55rem;
  padding-top: 45rem;
}
.M_State-FlowerSheets {
  position: relative;
  left: 5rem;
  padding-top: 110rem;
}
.M_State-Grass {
  position: relative;
  left: -50rem;
  padding-top: 85rem;
}

.M_State-Ear {
  padding-top: 95rem;
  padding-left: 40rem;
}
.M_State-Autumn {
  padding-top: 70rem;
  padding-left: 95rem;
}
.M_State-Iphone {
  padding-top: 80rem;
  padding-left: 80rem;
}
.M_State-Bear {
  padding-top: 80rem;
  padding-left: 45rem;
}
.M_State-TreeVar {
  padding-top: 55rem;
  padding-right: 30rem;
}
.M_State-Hand {
  padding-top: 58rem;
  padding-left: 40rem;
}
.M_State-Spring {
  padding-top: 40rem;
  padding-left: 80rem;
}
.M_State-Flower {
  padding-top: 43rem;
  padding-right: 10rem;
}
.M_State-Sun {
  padding-top: 10rem;
  padding-right: 45rem;
}
.M_State-Leg {
  padding-top: 20rem;
  padding-left: 40rem;
}
.M_State-SunVar {
  position: relative;
  padding-top: 0rem;
  left: 85rem;
}
.M_State-Mite {
  padding-top: 20rem;
  padding-left: 55rem;
}

.M_State-BodyVar {
  padding-top: 17rem;
  padding-right: 52rem;
}

.M_State-Forest {
  position: relative;
  top: -5rem;
  padding-right: 7rem;
}

.M_State-Knee {
  padding-top: 10rem;
  padding-left: 40rem;
}
.M_State-FirstAidKit {
  padding-top: 10rem;
  padding-left: 30rem;
}
.M_State-DirectionVar {
  padding-top: 10rem;
  padding-right: 15rem;
}

.M_Article-Info-img {
  display: flex;
  gap: 30rem;
}

.M_Article-Info-img-Small {
  display: block;
  width: 280rem;
  min-height: auto;
}
.M_Article-Info-img-Small-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300rem;
  min-height: 250rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15rem;
}

.M_Article-Info-img-Small-bg-trail {
  background-image: url(c7f4ec16281adbee99bc.webp);
}

.M_Article-Info-img-Small-bg-sun {
  background-image: url(43bfea778d68b0d9efb1.webp);
}

.M_Article-Info-img-Small-bg-relief {
  background-image: url(b4689fa57eaf93209c64.webp);
}
.M_Article-Info-img-Small-bg-wind {
  background-image: url(39c21d72c7a939cf716e.webp);
}
.M_Article-Info-img-Small-bg-firewood {
  background-image: url(6197f6b33f862f597595.webp);
}
.M_Article-Info-img-Small-bg-heat {
  background-image: url(12c97869f8d39c2e0ce6.webp);
}
.M_Article-Info-img-Small-bg-Mush {
  background-image: url(1ca249d62bf4a9aa6f63.webp);
}
.M_Article-Info-img-Small-bg-cap {
  background-image: url(8b8bb17ef2c730060e39.webp);
}
.M_Article-Info-img-Small-bg-MushVar {
  background-image: url(ac9a09209a0c6a91773d.webp);
}
.M_Article-Info-img-Large {
  display: block;
  width: 570rem;
  min-height: auto;
}

.M_Article-Info-Steps {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}

.M_Article-Info-Step {
  display: flex;
  flex-direction: column;
  padding: 20rem 17rem 20rem 20rem;
  gap: 30rem;
  width: 284rem;
  min-height: auto;
  border-radius: 15rem;
  background-color: var(--color-card);
}

.M_Article-Info-Content {
  display: flex;
  gap: 30rem;
}

.M_Article-Info-Steps-Title {
  display: flex;
  align-items: center;
  gap: 12rem;
}

.M_List {
  display: flex;
  flex-direction: column;
  gap: 30rem;
  padding: 30rem 20rem;
  width: 900rem;
  min-height: 426rem;
  border-radius: 15rem;
  background-color: var(--color-card);
}

.M_List_Content {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.M_List_Content-Title {
  display: flex;
  gap: 15rem;
}

.M_Article-Important {
  display: flex;
  gap: 30rem;
  padding: 30rem 40rem;
  width: 900rem;
  min-height: auto;
  border-radius: 15rem;
  background-color: var(--color-card-accent);
}

.M_Article-storm-tegs {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15rem;
  width: 900rem;
  min-height: 500rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(d75cde67b845addcdcf1.webp);
}

.M_Article-biotopes-tegs {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15rem;
  width: 900rem;
  min-height: 500rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(7bd675eb058f2a5d9f04.webp);
}

.M_Article-clothing-tegs {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15rem;
  width: 900rem;
  min-height: 500rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(2327f08085f3f14a5c3d.webp);
}

.M_Article-Info-Stat-Card {
  display: flex;
  flex-direction: column;
  padding-top: 70rem;
  width: 202rem;
  min-height: 281rem;
  border-radius: 15rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.M_Article-Info-Stat-Card-Forest {
  background-image: url(68dbc5136203cc6f39dd.webp);
}

.M_Article-Info-Stat-Card-Ravine {
  padding-top: 80rem;
  background-image: url(3eafd68da1802bc2a795.webp);
}

.M_Article-Info-Stat-Card-Mountain {
  background-image: url(4f6c22ad81ad0a0aeca5.webp);
}

.M_Article-Info-Stat-Card-Grass {
  background-image: url(dfe70b704ee9c4be4dcf.webp);
}

.M_Article-Info-Stat-Card-Dampness {
  background-image: url(a00c4ac170e8b4660086.webp);
}

.M_Article-Info-Stat-Card-RavineVar {
  background-image: url(73b2bb4f1bf865c3f5f1.webp);
}

.M_Article-Info-Stat-Card-ForestVar {
  background-image: url(d361ed2659f717f19b71.webp);
}

.M_Article-Info-Stat-Card-GrassVar {
  background-image: url(0708ff982661c11d59b8.webp);
}

.M_Article-Info-Stat-Cards {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}

/* Общие стили */
.O_Header {
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40rem;
}

.O_Footer {
  display: flex;
  justify-content: space-between;
  padding: 40rem;
  width: 100%;
  min-height: 305rem;
  background-color: var(--color-surface);
}

/* ___________________interactive.html___________________ */
.O_HeaderInteractive {
  gap: 180rem;
  background-image: url(3787ea562b0e23b66b2f.webp);
  min-height: 625rem;
}

.O_SectionTests {
  display: flex;
  flex-wrap: wrap;
  padding: 0 40rem;
  gap: 20rem;
}

.O_TestCard {
  display: flex;
  gap: 10rem;
  padding: 10rem;
  width: 670rem;
  min-height: 210rem;
  border-radius: 25rem;
  background-color: var(--color-card);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.O_TestCard:hover {
  background-color: rgba(19, 53, 36, 0.7);
}

.O_TestBanner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50rem;
  padding-top: 70rem;
  width: 100%;
  min-height: 425rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-surface);
  text-decoration: none;
}
.O_TestMushrooms {
  background-image: url(0276aeac665a153e2594.webp);
}
.O_TestWhatToTake {
  background-image: url(06da3e62b83b7688711d.webp);
}
.O_TestWhereToGo {
  background-image: url(c258035e865daba5f59f.webp);
}
.O_TestMushrooms h2 {
  padding-top: 10rem;
}

.O_LearnMore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60rem;
}

/* ___________________main_ForestExam.html___________________ */
.O_HeaderForestExam {
  gap: 250rem;
  background-image: url(119542105ff29f2f8cc0.webp);
  min-height: 100vh;
}

/* ___________________test_ForestExam.html___________________ */

.O_TestPage {
  display: flex;
  flex-direction: column;
  padding: 100rem 40rem;
  align-items: center;
  text-align: center;
  gap: 100rem;
}

.O_TestContent {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 40rem;
}

.O_QuestionList {
  display: flex;
  gap: 20rem;
  flex-wrap: wrap;
}

/* ___________________result_ForestExam.html___________________ */
.O_ResultSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40rem;
}

.O_CorrectAnswers {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}

/* ___________________index.html___________________ */
.O_HeaderMain {
  gap: 190rem;
  background-image: url(473f1901cb630a9aed33.webp);
  min-height: 807rem;
}

.O_Calendar {
  display: flex;
  flex-direction: column;
  gap: 70rem;
  align-items: center;
}

.O_CalendarState {
  display: grid;
  grid-template-columns: 536rem 431rem 353rem;
  grid-template-rows: 136rem 264rem;
  gap: 20rem;
}

.O_Daylight {
  display: flex;
  padding: 25rem 35rem;
  gap: 130rem;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  border-radius: 15rem;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(5e52eda8043a0a443173.webp);
}

.O_ForestState {
  display: flex;
  flex-direction: column;
  padding: 25rem 35rem;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border-radius: 15rem;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(708c0e5071933c605574.webp);
}

.O_ForestSky {
  display: flex;
  flex-direction: column;
  padding: 25rem 35rem;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  border-radius: 15rem;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(faa350b253a986bf9e3e.webp);
}
.O_ForestOther {
  display: flex;
  flex-direction: column;
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  gap: 20rem;
}

.O_ForestState-Other {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15rem;
  min-height: 194rem;
  padding: 20rem 25rem;
  background-color: var(--color-surface);
}

.O_Section-Checklist-Cards {
  display: flex;
  gap: 30rem;
}

.O_Section-MainArticle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 70rem;
  width: 1360rem;
  min-height: 500rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(34cca8c4efc2659bd5ae.webp);
}

.O_Section-ArticlesList {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  align-items: center;
}

.O_Section-TestsList {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  align-items: center;
}

.O_ArticlesList {
  display: flex;
  gap: 30rem;
}

.O_Articles-CardList {
  display: flex;
  flex-direction: column;
  padding: 10rem;
  gap: 10rem;
  width: 317rem;
  border-radius: 15rem;
  background-color: var(--color-card);
}

.O_Section-TestsList_Cards {
  display: grid;
  grid-template-columns: repeat(2, 665rem);
  grid-template-rows: repeat(2, 180rem);
  gap: 30rem;
}

.O_Section_Dzen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 500rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(dd9499179e06e2fec9e2.webp);
}

.O_InWork {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rem 40rem;
  gap: 40rem;
}

/* ___________________404.html___________________ */
.O_Header-NotFound {
  gap: 180rem;
  background-image: url(74d37c63886aa2302f28.webp);
  min-height: 100vh;
}

/* ___________________articles.html___________________ */
.O_Header-articles {
  gap: 200rem;
  background-image: url(bd9ca0c9b8c8d94f4144.webp);
  min-height: 695rem;
}

.O_Section-Checklist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rem;
}

.O_Section-Articles {
  display: flex;
  flex-direction: column;
  gap: 40rem;
}

.O_Header-Articles {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.O_Articles-Grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rem;
}

.O_Articles-Card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10rem;
  gap: 10rem;
  width: 434rem;
  border-radius: 15rem;
  background-color: var(--color-card);
}

/* ___________________main_test_mushroom.html___________________ */
.O_Header-main-test {
  gap: 250rem;
  background-image: url(5e06a1b006424dcc5ff5.webp);
  min-height: 100vh;
}

/* ___________________main_test2_questions.html___________________ */
.O_Header-test2 {
  gap: 250rem;
  background-image: url(6224009b594bcc859ce5.webp);
  min-height: 100vh;
}

/* ___________________test1_questions.html___________________ */
.O_Test-Exam {
  display: flex;
  flex-direction: column;
  padding: 160rem 40rem 100rem;
  gap: 170rem;
}

.O_Test-ExamContent {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}

.O_Test-ExamQuestions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rem;
}

/* ___________________result_test_exam.html___________________ */
.O_CorrectAnswerCardVar {
  display: flex;
  align-items: center;
  padding: 20rem;
  gap: 30rem;
  width: 100%;
  min-height: 180rem;
  background-color: var(--color-card);
  border-radius: 15rem;
}

/* ___________________main_test_mushroom.html___________________ */
.O_Header-calendar {
  gap: 200rem;
  background-image: url(images/calendar-bg.png);
  min-height: 695rem;
}
.O_ForestConditions {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}
.O_ForestConditions-Month {
  display: grid;
  grid-template-columns: 360rem 980rem;
  grid-template-rows: repeat(2, 230rem);
  gap: 20rem;
}
.O_ForestTrendChart {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 30rem;
  padding: 15rem 20rem;
  border-radius: 15rem;
  background-color: var(--color-card-accent);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(914e45f0e4f3f3e7745a.webp);
}
.O_ForestStatCards {
  display: flex;
  gap: 20rem;
}
.O_ForestStatOther {
  display: grid;
  grid-template-columns: repeat(2, 670rem);
  grid-template-rows: repeat(2, 260rem);
  gap: 20rem;
}
.O_ForestState-Calendar {
  display: flex;
  flex-direction: column;
  padding: 15rem 20rem;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  border-radius: 15rem;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(e9acde0f3cec79c3ade3.webp);
}
.O_ForestSky-Calendar {
  display: flex;
  flex-direction: column;
  padding: 15rem 20rem;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border-radius: 15rem;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(9b84e5823ca35f27e6b3.webp);
}
.O_ForestActivity {
  display: flex;
  flex-direction: column;
  padding: 15rem 20rem;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  border-radius: 15rem;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(5458a4c4b1e97f04a1c7.webp);
}
.O_ForestRisks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 170rem 230rem;
  gap: 40rem;
  width: 100%;
  min-height: 650rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(cab13333a4bcc0b22aef.webp);
}

.O_ForestProducts {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rem 40rem;
  gap: 40rem;
}
.O_ForestProducts-List {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  row-gap: 60rem;
  column-gap: 30rem;
}
.O_Section-Checklist-Calendar {
  padding-bottom: 120rem;
}

/* ___________________article_name.html___________________ */
.O_Header_Article {
  gap: 200rem;
  min-height: 350rem;
}

.O_Header_Article-ticks {
  background-image: url(398de2c9a69347b8766a.webp);
}

.O_Header_Article-storm {
  background-image: url(ddac9061ecddcf9ed84d.webp);
}

.O_Header_Article-compass {
  background-image: url(b3f0e131491c20bb8136.webp);
}
.O_Header_Article-trail {
  background-image: url(d63412de464ab2cdedb6.webp);
}
.O_Header_Article-backback {
  background-image: url(a69dcd7f66e203f34cfb.webp);
}
.O_Header_Article-clothing {
  background-image: url(7604c557121affeee8d2.webp);
}
.O_Header_Article-fire {
  background-image: url(d282ff1d46fb8a459477.webp);
}
.O_Header_Article-tea {
  background-image: url(6cb74062e28674c657ba.webp);
}
.O_Header_Article-Seasons {
  background-image: url(8cd54caf5e87bc80bcd4.webp);
}
.O_Header_Article-biotopes {
  background-image: url(186fa2d8f5aa827a716e.webp);
}
.O_Header_Article-borovik {
  background-image: url(43f1e3533f633abdd178.webp);
}
.O_Header_Article-fox {
  background-image: url(a8d2c773e84a8621c733.webp);
}

.O_Main_Article {
  display: flex;
  flex-direction: column;
  gap: 80rem;
  padding: 80rem 270rem 120rem;
}

.O_Article-Content {
  display: flex;
  flex-direction: column;
  gap: 80rem;
}

.O_Article-Stats-Block {
  display: flex;
  padding: 15rem 35rem;
  border-radius: 15rem;
  min-height: 264rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(61683219aa1763e0484f.webp);
}
.O_Article-Stats-BlockVar {
  display: flex;
  padding: 15rem 35rem;
  border-radius: 15rem;
  min-height: 264rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(f485fa1cf0d80df66a0d.webp);
}

/* Общие стили */
.W_Search {
  display: none;
  position: relative;
}

.W_Search.is-open {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

/* ___________________interactive.html___________________ */
.W_TestCardContent {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  width: 100%;
}

.W_LearnMoreCards {
  display: flex;
  gap: 20rem;
}

.W_ArticleImage {
  display: flex;
  justify-content: center;
  padding: 10rem;
  width: 240rem;
  min-height: 146rem;
  border-radius: 25rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(images/stub.png);
}

/* ___________________interactive.html___________________ */
.T_MainInteractive {
  display: flex;
  flex-direction: column;
  gap: 120rem;
  padding: 120rem 0;
}

/* ___________________result_ForestExam.html___________________ */
.T_ResultPage {
  display: flex;
  flex-direction: column;
  padding: 120rem 385rem;
  gap: 120rem;
}

@media screen and (max-width: 440px) {
  html {
    font-size: calc(1vw / 4.4);
    scroll-behavior: smooth;
  }
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .A_Heading-H1 {
    font-size: 40rem;
    line-height: 1.35;
  }
  .A_Heading-H2 {
    font-size: 32rem;
    line-height: 1.35;
  }
  .A_Heading-H4 {
    font-size: 22rem;
    line-height: 1.35;
  }
  .A_Tag-Text {
    font-size: 16rem;
  }
  .O_Header {
    padding: 30rem;
  }
  .O_Header-main {
    gap: 154rem;
    min-height: 874rem;
    background-image: url(d75bf21babd4f482c091.webp);
  }
  .M_Logo {
    width: 55rem;
    height: 55rem;
  }
  .A_InnerCircle {
    width: 45rem;
    height: 45rem;
  }
  .A_LogoImage {
    width: 23.6rem;
  }
  .M_NavigationMenu {
    display: none;
  }
  .M_Search {
    display: none;
  }

  .M_burger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55rem;
    height: 55rem;
    padding: 2.5rem;
    border: none;
    border-radius: 50%;
    background-color: var(--color-surface);
    cursor: pointer;
  }
  .A_burger-icon {
    display: block;
    width: 27rem;
    height: auto;
  }
  .M_HeroContent {
    text-align: center;
    gap: 45rem;
  }
  .A_Paragraph-HeroContent {
    display: none;
  }

  .M_TagGroup {
    padding-top: 0;
    flex-wrap: wrap;
    row-gap: 10rem;
    justify-content: center;
  }
  .M_TagIcon-none {
    display: none;
  }

  .O_Main {
    padding: 90rem 30rem;
    gap: 90rem;
  }
  .O_CalendarState {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
  }
  .A_State_img {
    width: 53rem;
  }
  .O_Daylight {
    flex-direction: column;
    gap: 20rem;
    padding: 20rem;
    width: 380rem;
    height: 190rem;
    background-image: url(a630d2dbeb8fd07e8e6c.webp);
  }
  .O_ForestState {
    gap: 20rem;
    padding: 20rem;
    width: 380rem;
    height: 278rem;
    background-image: url(2f8cd4b4bb98ca52e315.webp);
  }
  .O_ForestSky {
    gap: 7rem;
    padding: 20rem;
    width: 380rem;
    height: 264rem;
    background-image: url(c533fac18313e3ce2a49.webp);
  }
  .M_State_Sunrise {
    position: relative;
    left: -120rem;
  }
  .M_State-Sunset {
    position: relative;
    padding-left: 0;
    top: -114rem;
    left: 125rem;
  }
  .M_Passability-Index {
    gap: 5rem;
  }
  .M_State-Permafrost {
    padding-left: 0rem;
    padding-top: 35rem;
  }
  .M_State-Dampness {
    padding-top: 75rem;
  }
  .M_State-Slush {
    padding-left: 27rem;
    padding-top: 15rem;
  }
  .M_State-Dirt {
    padding-left: 42rem;
    padding-top: 0;
  }
  .M_StateSky {
    gap: 28rem;
    padding-left: 14rem;
    padding-top: 2rem;
  }
  .M_StateCloudy {
    padding-top: 13rem;
    padding-left: 80rem;
  }
  .M_StateAutumn {
    padding-left: 200rem;
    padding-top: 15rem;
  }
  .O_ForestState-Other {
    width: 380rem;
    height: 198rem;
  }
  .A_Button-ForestState {
    width: 380rem;
    padding-left: 110rem;
  }
  .A_Tag-Text-Dampness {
    padding-left: 50rem;
  }
  .A_Tag-Text-Fire {
    padding-left: 30rem;
  }
  .A_Tag-Text-Insect {
    padding-left: 88rem;
  }
  .A_Tag-Text-Mite {
    padding-left: 133rem;
  }
  .O_Section-Checklist-Cards {
    display: grid;
    grid-template-columns: repeat(2, 157rem);
    grid-template-rows: repeat(2, 1fr);
    flex-wrap: wrap;
    gap: 40rem;
  }
  .O_Section-Checklist {
    gap: 30rem;
  }
  .A_Link-CheckList-biotopes {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .M_Card-CheckList-biotopes {
    text-align: center;
    width: 157rem;
    min-height: 222rem;
    background-image: url(5ed2c8f4747fc2d6cb12.webp);
  }
  .M_Card-CheckList-biotopes:hover {
    background-image: url(5ed2c8f4747fc2d6cb12.webp);
  }
  .A_Link-CheckList-seasons {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .M_Card-CheckList-seasons {
    text-align: center;
    width: 157rem;
    min-height: 222rem;
    background-image: url(f57d4a13bc05ec5b1b72.webp);
  }
  .M_Card-CheckList-seasons:hover {
    background-image: url(f57d4a13bc05ec5b1b72.webp);
  }
  .A_Link-CheckList-trail {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .M_Card-CheckList-trail {
    padding-top: 160rem;
    padding-left: 0;
    gap: 30rem;
    text-align: center;
    width: 157rem;
    min-height: 222rem;
    background-image: url(6ba186bb106d7ae5cc3a.webp);
  }
  .M_Card-CheckList-trail:hover {
    background-image: url(6ba186bb106d7ae5cc3a.webp);
  }
  .A_Link-CheckList-compass {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .M_Card-CheckList-compass {
    padding-top: 160rem;
    padding-left: 0;
    gap: 30rem;
    text-align: center;
    width: 157rem;
    min-height: 222rem;
    background-image: url(79cad15f07863238c82e.webp);
  }
  .M_Card-CheckList-compass:hover {
    background-image: url(79cad15f07863238c82e.webp);
  }
  .A_Link-CheckList-ticks {
    display: none;
  }
  .A_TestCard_ContentButton {
    display: none;
  }
  .O_Section-MainArticle {
    align-items: start;
    justify-content: start;
    gap: 30rem;
    width: 380rem;
    min-height: 250rem;
    background-image: url(7e5f13dada7718dd15dc.webp);
  }
  .M_TagItem-MainArticle {
    align-self: center;
  }
  .A_Heading-H2-MainArticle {
    text-align: start;
  }
  .A_Paragraph-MainArticle {
    display: none;
  }
  .A_Button-MainArticle {
    position: relative;
    top: 100rem;
    width: 380rem;
    padding-left: 120rem;
  }
  .O_Section-ArticlesList {
    padding-top: 80rem;
    align-items: start;
    gap: 20rem;
  }
  .O_ArticlesList {
    flex-direction: column;
    gap: 20rem;
  }
  .O_Articles-CardList {
    display: grid;
    grid-template-columns: 99rem 1fr 10rem;
    grid-template-rows: 1fr 1fr;
    flex-direction: row;
    width: 380rem;
  }
  .M_TagItem-CardList {
    display: none;
  }
  .M_Articles-CardList {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 99rem;
    min-height: 139rem;
  }
  .M_Articles-CardContent {
    grid-column: 2 / 3;
    grid-row: 1 /2;
  }
  .M_Articles-CardFooter {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: end;
  }
  .A_Articles-CardList-Arrow {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    display: block;
    height: auto;
    width: 10rem;
    align-self: center;
  }
  .M_Button-more {
    width: 380rem;
  }
  .O_Section-TestsList {
    align-items: start;
    gap: 20rem;
  }
  .O_Section-TestsList_Cards {
    display: flex;
    flex-direction: column;
    gap: 20rem;
  }
  .O_Test_Var {
    display: grid;
    grid-template-columns: 130rem 1fr 10rem;
    grid-template-rows: 1fr 1fr;
    width: 380rem;
    gap: 20rem;
  }
  .A_TestCardList_image {
    display: none;
  }
  .A_TestCard_image {
    display: none;
  }
  .A_TestCardList_image-iphone {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: block;
  }
  .A_TestCard_image-iphone {
    display: block;
  }
  .M_TagItem-Article-iphone {
    display: none;
  }
  .M_TagItem-iphone {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: end;
    padding-bottom: 10rem;
  }
  .O_TestCardList_Content {
    flex-direction: column-reverse;
    justify-content: space-between;
    padding: 10rem 0;
  }
  .O_Section_Dzen {
    min-height: 700rem;
    gap: 60rem;
    background-image: url(c2dd7fd40213787ebe73.webp);
  }
  .M_Section_Dzen-Content {
    flex-direction: column;
    gap: 20rem;
  }
  .A_Button-Dzen {
    width: 55rem;
    height: 55rem;
  }
  .O_InWork {
    align-items: start;
    padding: 90rem 30rem;
  }
  .O_LearnMore-grid {
    display: grid;
    grid-template-columns: repeat(2, 157rem);
    gap: 40rem;
    align-self: center;
  }
  .M_LearnCard_InWork-iphone {
    display: none;
  }
  .M_Articles-CardMedia {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 157rem;
    min-height: 144rem;
  }
  .A_Heading-H3-iphone {
    font-size: 22rem;
    line-height: 1.35;
    font-weight: var(--font-weight-regular);
    text-align: center;
  }
  .M_LearnCard_InWork {
    background-color: transparent;
  }
  .O_Footer {
    min-height: 446rem;
    padding: 40rem 30rem;
    flex-direction: column;
    gap: 70rem;
  }
  .M_Social-Network {
    display: none;
  }
  .M_Footer-text-wrapper {
    gap: 30rem;
  }
  input[type="email"] {
    width: 292rem;
  }
  #my-form {
    gap: 0;
  }
  .M_Footer-Section {
    gap: 62rem;
  }
  .O_Calendar {
    gap: 30rem;
  }
  .M_Header-FilterGroup-Tegs {
    flex-wrap: wrap;
  }
  .O_Articles-Grid {
    display: flex;
    flex-direction: column;
  }
  .O_Articles-Card {
    display: grid;
    grid-template-columns: 99rem 1fr 10rem;
    width: 380rem;
    gap: 10rem;
  }
  .M_Articles-ticks.visible {
    background-image: url(b7ed93323218a5502a74.webp);
  }
  .M_Articles-storm.visible {
    background-image: url(12907ab5472296df3497.webp);
  }
  .M_Articles-compass.visible {
    background-image: url(fd18fcd63c11c5e1a0ca.webp);
  }
  .M_Articles-trail.visible {
    background-image: url(fb43d36840763c8fa8ab.webp);
  }
  .M_Articles-backpack.visible {
    background-image: url(4a5f83683ea06fbc53e6.webp);
  }
  .M_Articles-clothing.visible {
    background-image: url(d5ea9dd9b6c573ad3c59.webp);
  }
  .M_Articles-bonfire.visible {
    background-image: url(9b2b76c1906ccf115c72.webp);
  }
  .M_Articles-tea.visible {
    background-image: url(907f351f640007f50c41.webp);
  }
  .M_Articles-seasons.visible {
    background-image: url(0e941224b7114f236126.webp);
  }
  .M_Articles-biotopes.visible {
    background-image: url(de3eecba23e2d58f5466.webp);
  }
  .M_Articles-boletus.visible {
    background-image: url(86b97d4a8fe235d32a5e.webp);
  }
  .M_Articles-fox.visible {
    background-image: url(466b1c2c3423fcf8245a.webp);
  }
  .M_Articles-CardMedia-iphone {
    width: 99rem;
    height: 139rem;
  }
  .O_Section-Tests {
    align-self: center;
    flex-direction: column;
    gap: 20rem;
    padding: 0rem;
  }
  .O_TestCard {
    padding: 10rem;
    width: 380rem;
    min-height: 140rem;
  }
  .O_TestCard_Content {
    padding: 10rem 0;
    flex-direction: column-reverse;
    justify-content: space-between;
  }
  .O_HeroTest {
    padding: 10rem;
    min-height: 253rem;
    gap: 30rem;
    background-image: url(c0b9486bcd0c6052c5da.webp);
  }
  .O_Main-Interactive {
    padding: 90rem 0;
  }
  .M_HeroTest_Content {
    text-align: start;
  }
  .A_Button-Arrow {
    position: relative;
    top: 130rem;
    width: 380rem;
    padding-left: 120rem;
  }
  .O_LearnMore {
    padding-top: 90rem;
    align-items: start;
    gap: 30rem;
  }
  .M_LearnCard {
    background-color: transparent;
  }
  .M_LearnCard:hover {
    background-color: transparent;
  }
  .A_Heading-H2-padding {
    padding-left: 30rem;
  }
}