.events-list {
    article {
        &.month {
            display: block;
            background: linear-gradient(to bottom, transparent 0%, transparent 48%, rgb(var(--tus-red)) 50%, transparent 52%, transparent 100%);
            > span {
                background: white;
                padding: var(--gap);
                padding-left: 0;
            }
        }
        &.date {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: var(--gap);
            > div:first-child {
                > span:first-child {
                    display: block;
                    text-align: center;
                    margin-bottom: 10px;
                }
                > span:last-child a {
                    font-size: calc(var(--fontsize) * 3);
                    background: rgb(var(--tus-blue));
                    color: white;
                    border: 3px solid rgb(var(--tus-gold));
                    border-radius: 100vw;
                    padding: 10px;
                }
            }
            > div:last-child {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                align-content: flex-start;
                justify-content: center;
                gap: 10px;
                * {
                    margin: 0 !important;
                }
            }
        }
    }
}

.bg-blue{ 
    padding: 0;
    time {
        margin: 0 !important;
    }
}

#calendarModal {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.5);
  z-index: 1000;

  &.active {
    display: block;
  }

  .modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    .calendar-list {
      margin-bottom: 20px;

      label {
        display: block;
        margin-bottom: 10px;
        cursor: pointer;

        input {
          margin-right: 8px;
        }
      }
    }

    .modal-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
      * {
        white-space: nowrap;
      }
    }
  }
}