.layout.layout-default {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.125em;
}

.layout.layout-with-sidebar {
  max-width: 100%;
  display: flex;
  gap: 1.125em;
  padding: 0 1.125em;
}

.layout.layout-with-sidebar aside {
  width: 256px;
  background-color: var(--color-grey-50);
  flex-shrink: 0.4;
  min-height: calc(100vh - 170px - 1.125em);
  height: fit-content;
  position: sticky;
  top: 1.125em;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.layout.layout-with-sidebar main {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

/* ----------- mobile -------------- */

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .layout.layout-with-sidebar {
    flex-direction: column;
  }

  .layout.layout-with-sidebar aside {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    background: none;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
}