src/theme/BlogLayout/styles.module.scss

.contentLayout {
  max-width: var(--global-main-width);
  margin: 0 auto;
  padding: 24px var(--mobile-padding-width) 48px;
}

.main {
  width: 100%;

  &.blogList {
    margin: 0 auto;

    .listWrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
  }

  &.blogDetail {
    max-width: 760px;
    margin: 0 auto;
  }

  @media screen and (max-width: 1024px) {
    &.blogList {
      .listWrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }
  }
  @media screen and (max-width: 640px) {
    &.blogList {
      .listWrap {
        grid-template-columns: 1fr;
      }
    }
  }
}