.component {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.sidebarIsOpen {
  @media screen and (max-width: 768px) {
    overflow: hidden;

    &::after {
      content: "";
      display: block;
      background: rgba(0, 0, 0, 0.9);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: var(--sidebar-z-overlay);
    }
  }
}

.main {
  overflow: scroll;
  height: 100%;
  width: 100%;
  position: relative;
}

.sliderArea {
  --gap: var(--gap-min);
  max-width: calc(928px + var(--gap) * 2);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gap);
  margin-top: 2rem;
}

.content {
  --gap: var(--gap-min);
  max-width: var(--main-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gap);
}

@media (min-width: 48rem) {
  .content {
    --gap: var(--gap-max);
  }
}