.instruction {
  background: var(--c-background-quaternary);
  padding: var(--s-md-space);
  border-radius: var(--s-dl-space);
  margin-top: calc(var(--s-dl-space) * -1);
  @media (max-width: 43rem) {
    margin-top: 0;
  }
}
.instruction * {
  cursor: pointer;
}
.instruction__label p {
  font-weight: var(--f-weight-medium);
  margin-block: 0.5em;
}
.instruction__header-row {
  display: flex;
  gap: var(--s-sm-space);
  color: var(--c-text-action);
  cursor: pointer;
}
.instruction h2 {
  color: var(--c-text-action);
  cursor: pointer;
}
.instruction input {
  display: none;
}
.instruction__list {
  cursor: pointer;
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  transition: 300ms;
  user-select: none; /* Отключает выделение текста */
  -webkit-user-select: none; /* Для Safari */
  -moz-user-select: none; /* Для Firefox */
  -ms-user-select: none; /* Для Internet Explorer/Edge */
}
.instruction__list > * {
  overflow: hidden;
}
.instruction input:checked ~ .instruction__list {
  grid-template-rows: 1fr;
  padding-top: 1rem;
}

.instruction__header-row svg {
  transition: 0.3s ease;
}
.instruction__label input:checked + .instruction__header-row svg {
  transform: rotate(90deg);
}
.instruction__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-md-space);
  @media (max-width: 43rem) {
    grid-template-columns: 1fr;
  }
}
.instruction__grid > li {
  background-color: #ffffff00;
  padding: var(--s-md-space);
  border-radius: var(--s-md-space);
  transition: background-color 0.5s ease-in;
  border: solid var(--border-thickness) rgba(0, 39, 148, 0.096);
}
.instruction input:checked ~ .instruction__list .instruction__grid > li {
  background-color: var(--c-background-primary);
  transition: background-color 0.5s ease-in;
}
.instruction ol {
  list-style: none;
  padding-left: 1.5em;
  counter-reset: item;
  padding: 0;
}
.instruction ol li {
  counter-increment: item;
}
.instruction ol li:nth-child(1) {
  grid-column: span 2;
  @media (max-width: 43rem) {
    grid-column: span 1;
  }
}
.instruction ol li:nth-child(6) {
  grid-column: span 2;
  @media (max-width: 43rem) {
    grid-column: span 1;
  }
}
.instruction ol li::before {
  content: counter(item);
  font-size: var(--f-size-h2);
  font-weight: var(--f-weight-medium);
  line-height: 1;
  padding-right: var(--s-md-space);
  color: var(--c-accent-primary);
}
.instruction ol li span {
  font-weight: var(--f-weight-bold);
}
.instruction ul {
  display: grid;
  gap: var(--s-sm-space);
}