@layer components {
  .day-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 8px;
    font-size: var(--text-xx-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-ink-medium);

    @media (min-width: 768px) {
      margin: 16px 20px;
    }

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background-color: var(--color-ink-lighter);
      opacity: 0.5;
    }
  }
}