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

:root {
  --pico-font-size: 100%;
}

@media (max-width: 1200px) {
  :root {
    --pico-font-size: 80%;
  }
}

@media (min-width: 769px) {
  .small-only {
    display: none;
  }

  main {
    max-width: 1536px;
    margin: auto;
  }
}

@media (max-width: 768px) {
  :root {
    --pico-font-size: 100%;
  }

  .large-only {
    display: none;
  }
}

.item-page {
  main {
    // width: 100vw;
    padding: calc(1*var(--pico-spacing)) calc(3*var(--pico-spacing));

    .middle {
      margin: auto;
      width: 42%;
    }

    .left {
      float: left;
      clear: left;
      width: 25%;
      margin-left: 0;
      margin-right: 4%;
    }

    .right {
      float: right;
      clear: right;
      width: 25%;
      margin-left: 4%;
      margin-right: 0%;
    }
  }

  @media (max-width: 768px) {
    main {
      display: flex;
      flex-flow: column nowrap;
      padding: calc(1*var(--pico-spacing));

      .left,
      .right,
      .middle {
        float: none;
        clear: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
    }
  }
}

.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);
      }

      >div:has(>article) {
        margin: 0;
      }

      >aside {
        order: 2;

        >section {
          margin-block: 0.5em;
        }

        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;
          }
        }
      }

      >aside.top {
        order: -1;
      }

      ul {
        padding: 0;
      }
    }
  }
}