@layer sections {
      #month {
        position: relative;
        height: 320vh;
      }

      #month .mo-stage {
        position: sticky;
        top: 0;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(32px, 7vh, 72px);
        padding: 64px var(--space-1) clamp(56px, 12vh, 120px) 0;
      }

      #month .mo-board {
        position: relative;
        margin-left: var(--space-2);
      }

      #month .mo-scale {
        position: relative;
        height: 34px;
        border-right: 1px solid var(--color-2);
        background:
          linear-gradient(var(--color-2), var(--color-2)) 0 100% / 100% 1px no-repeat,
          repeating-linear-gradient(to right, var(--color-2) 0 1px, transparent 1px calc(100% / 4)) 0 100% / 100% 30px no-repeat,
          repeating-linear-gradient(to right, var(--color-2) 0 1px, transparent 1px calc(100% / 28)) 0 100% / 100% 12px no-repeat;
      }

      #month .mo-fill {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 3px;
        background: var(--color-6);
        transform-origin: 0 50%;
      }

      #month .mo-marker {
        position: absolute;
        top: -12px;
        bottom: 0;
        right: -1px;
        width: 2px;
        background: var(--color-6);
      }

      #month .mo-tasks {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      #month .mo-task {
        padding: 22px clamp(14px, 2vw, 32px) 0 0;
        display: grid;
        align-content: start;
        gap: 8px;
        transition: color 0.3s;
      }

      #month .mo-day {
        color: var(--color-6);
        transition: color 0.3s;
      }

      #month .mo-task .m-text {
        max-width: 30ch;
      }

      #month .mo-note {
        margin-top: -8px;
      }

      @media (max-width: 700px) {
        #month {
          height: 300vh;
        }

        #month .mo-stage {
          gap: 26px;
          padding-bottom: 76px;
        }

        #month .mo-board {
          display: grid;
          grid-template-columns: 30px minmax(0, 1fr);
          gap: 14px;
        }

        #month .mo-scale {
          height: auto;
          border-right: 0;
          border-bottom: 1px solid var(--color-2);
          background:
            linear-gradient(var(--color-2), var(--color-2)) 0 0 / 1px 100% no-repeat,
            repeating-linear-gradient(to bottom, var(--color-2) 0 1px, transparent 1px calc(100% / 4)) 0 0 / 22px 100% no-repeat,
            repeating-linear-gradient(to bottom, var(--color-2) 0 1px, transparent 1px calc(100% / 28)) 0 0 / 9px 100% no-repeat;
        }

        #month .mo-fill {
          top: 0;
          bottom: 0;
          left: -1px;
          right: auto;
          width: 3px;
          height: auto;
          transform-origin: 50% 0;
        }

        #month .mo-marker {
          top: auto;
          left: -6px;
          right: 0;
          bottom: 0;
          width: auto;
          height: 2px;
        }

        #month .mo-tasks {
          grid-template-columns: 1fr;
          grid-auto-rows: 1fr;
        }

        #month .mo-task {
          padding: 0 0 16px;
          gap: 4px;
        }

        #month .mo-task .m-text {
          font-size: 14px;
          line-height: 1.38;
        }
      }
    }