.main {
  --main-padding: var(--spacing-xl);

  align-items: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding: var(--main-padding);
  position: relative;
  justify-content: flex-start;
}

@media all and (max-width: 1024px) {
  .main {
    --main-padding: var(--spacing-md);

    width: 100%;
  }
}

.main-wrapper {
  margin: 0 calc(var(--main-padding) * -1);
  overflow: auto;
  width: calc(100% + var(--main-padding) * 2);
}

.main-wrapped {
  display: inline-block;
  min-width: calc(100% - (var(--main-padding) * 2));
  margin-left: var(--main-padding);
  margin-right: var(--main-padding);
}