@use "blog.variable.module.scss" as blog;

.blog-container {
  // height: 100%;
  background-color: var(--color-bg);
  padding: 0 5vw;

  display: grid;
  grid-template-columns: minmax(13vw, 200px) 1fr;
  column-gap: 2vw;

  aside {
    display: grid;
    grid-template-rows: 40vh 60vh;
    row-gap: 2vh;
    z-index: 2;

    .blog-summary {
      // 滚动到顶部固定
      position: sticky;
      top: 0;
    }
  }

  section {
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 2vh;

    .blog-section {
      // height: 100%;
      min-height: 100vh;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
                  0 3px 1px -2px rgba(0,0,0,0.06),
                  0 1px 5px 0 rgba(0,0,0,0.12),
                  0 -1px 0.5px 0 rgba(0,0,0,0.09);

      .module-title {
        background-color: blog.$theme-color;
        padding: 5px;
        border: 2px solid blog.$theme-color;
        border-radius: 10px;
        text-align: center;
        font-size: blog.$large-font-size;
        font-family: "华文楷体", serif;
      }
    }
  }

  .card-item {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border-bg);
    border-radius: blog.$border-radius;
    // box-shadow: 3px 3px 3px #CFCFCF;
  }
}