.layout {
  display: flex;
  gap: 32px;

  width: 100%;
  height: 100dvh;
  padding: 32px;
}

main {
  display: flex;
  flex-direction: column;

  width: 100%;
  overflow: hidden auto;

  padding: 32px 48px;

  border-radius: 16px;
  box-shadow: var(--shadow-primary);
}

app-tab-bar {
  display: none;
}

@media screen and (max-width: 768px) {
  .layout {
    height: fit-content;
    padding: 0 16px;
    gap: 0;
  }

  main {
    padding: 16px 0;
    border-radius: 0;
    box-shadow: none;

    padding-bottom: calc(56px + 2 * 12px);
  }

  app-tab-bar {
    display: flex;
  }
}
