.module-board {
  --module: "board";
}

.module-board .animation {
  --animation-delay: 0.5s;
}

.module-board .component-line {
  --_animation-duration: 0.5s;
}

.module-board .board-container {
  --rem: var(--_rem, 100px);
  --grid: var(--_grid, 100px);

  --animation-duration: var(--_animation-duration, 0.2s);
  --animation-timing-function: var(--_animation-timing-function, linear);

  --color-font_: var(--_color-font_, 6, 16, 17);
  --color-first: var(--_color-first, 255, 255, 255);
  --color-main_: var(--_color-main_, 109, 4, 254);
}

.module-board .board-item {
  display: grid;
  grid-template-rows: minmax( calc( 6.00 * var(--rem) ), 100vh );
}

.module-board .board-figure {
  grid-column: 1;
  grid-row: 1;
}

.module-board .board-img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.module-board .board-menu {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-column: 1;
  grid-row: 1;
}

.module-board .board-menu-list {
  display: flex;
  grid-row: 2;
  justify-content: space-around;
  margin: 0 0 6.4vh 0;
}

.module-board .board-menu-link {
  color: rgb( var(--color-first) );
  font-size: min( 5vw, calc( 0.96 * var(--rem) ) );
  font-weight: 700;
  letter-spacing: -0.09em;
  position: relative;
  text-decoration: none;
  z-index: 3;
}

.module-board .board-menu-item .component-line {
  justify-items: center;
}

.module-board .board-menu-item.active .line {
  clip-path: inset(-10%);
}

.module-board .board-menu-item:first-of-type .component-line {
  justify-items: start;
}

.module-board .board-menu-item:last-of-type .component-line {
  justify-items: end;
}

.module-board .component-mark[data-text]:before {
  transition: background var(--animation-duration) var(--animation-timing-function);
}

.module-board .board-menu-link:hover .component-mark[data-text]:before,
.module-board .board-menu-link:focus .component-mark[data-text]:before {
  background: rgb( var(--color-main_) );
}

@media (max-width: 1000px) {
  .module-board .board-item {
    grid-template-rows: max( 100vh, calc( 4 * var(--rem) ) );
    min-height: max( 100vh, calc( 4 * var(--rem) ) );
  }

  .module-board .board-menu {
    display: block;
    height: 100%;
  }

  .module-board .board-menu-list {
    align-items: center;
    flex-flow: column;
    height: 100%;
    justify-content: center;
    gap: max( 2vh, calc( 0.18 * var(--rem) ) ) 0;
    margin: 0;
  }

  .module-board .board-menu-link {
    display: inline-flex;
    font-size: min( 10vmin, calc( 0.64 * var(--rem) ) );
  }

  .module-board .board-menu-item .line {
    display: inline-flex;
    line-height: 1em;
  }

  .module-board .component-mark[data-text]:before {
    padding: 0.3em 0.125em;
  }

  .module-board .component-mark[data-text]:first-child:before {
    padding-left: 0.425em;
  }

  .module-board .component-mark[data-text]:last-child:before {
    padding-right: 0.425em;
  }

  .module-board .board-menu-item .component-mark[data-text] .mark {
    inset: unset;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .module-board .board-menu-item .component-mark[data-text]:first-child .mark {
    left: 0.425em;
    transform: translate(0, -50%);
  }

  .module-board .board-menu-item .component-mark[data-text]:last-child .mark {
    left: auto;
    right: 0.425em;
    transform: translate(0, -50%);
  }
}