lib.itmens/common/static/scss/_layout.scss

.classic-page,
.feed-page {
  main {
    width: 100vw;
    display: grid;
    grid-template-columns: 64% 32%;
    grid-template-areas: "main aside";
    gap: 4%;
    padding: calc(3*var(--pico-spacing));

    .grid__main {
      grid-area: main;
    }

    .grid__aside {
      grid-area: aside;
    }
  }

  @media (max-width: 768px) {
    main {
      display: flex;
      flex-flow: column nowrap;
      padding: 0;
      gap: 0;

      .grid__main {
        order: -1;
        margin: var(--pico-spacing);
      }

      .grid__aside {
        order: -2;
      }

      ul {
        padding: 0;
      }

      aside.bottom {
        order: 2 !important;
      }


    }
  }
}

.content-page {
  article {
    margin: 0;
  }

  main {
    display: grid;
    grid-template-columns: auto 25%;
    grid-template-areas: "main aside";
    gap: calc(3*var(--pico-spacing));
    padding: calc(3*var(--pico-spacing));

    &>div {
      grid-area: main;
    }

    &>aside {
      grid-area: aside;

      article>div {
        text-align: center;
      }
    }
  }

  .owner-info {
    height: max-content;
    display: flex;
    flex-direction: row;
    gap: var(--pico-spacing);

    .owner {
      .avatar {
        width: calc(2rem * var(--pico-line-height));
        height: calc(2rem * var(--pico-line-height));

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .info {
      width: 70%;
    }

    .more {
      width: 20%;
    }
  }

  @media (max-width: 768px) {
    main {
      display: flex;
      max-width: 100%;
      flex-flow: column nowrap;
      padding: 0;
      gap: 0;

      >div {
        order: 1;
        // margin: var(--pico-spacing);
      }

      >aside {
        order: 2;

        article.item {
          display: grid;
          grid-template-columns: 25% auto;
          grid-template-areas: "main aside";
          margin: calc(var(--pico-spacing)/2);
          padding: 0;
          border: var(--pico-border-width) solid var(--pico-card-border-color);

          >* {
            margin: 0;
            border: 0;
          }

          >div {
            margin-left: var(--pico-spacing);
            background-color: var(--pico-card-sectioning-background-color);
            align-items: center;
            display: flex;
          }
        }
      }

      ul {
        padding: 0;
      }
    }
  }
}