@layer components {
  .main {
    display: flex;
    flex-direction: column;
    padding: var(--block-space-double) var(--inline-space-double);
    gap: var(--inline-space-double);
    margin-inline: auto;
    max-inline-size: var(--main-width);

    @media (width >= 860px) {
      flex-direction: row;
    }
  }

  .sidebar {
    inline-size: 100%;

    @media (width >= 860px) {
      inline-size: var(--sidebar-width);
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--block-space-double);
  }
}