Checkmate/Client/src/Layouts/HomeLayout/index.css

#root:has(.home-layout) {
  background-color: var(--env-var-color-30);
}

.home-layout {
  display: flex;
  position: relative;
  gap: var(--env-var-spacing-2);
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--env-var-spacing-2);
}

.home-layout aside {
  position: sticky;
  top: var(--env-var-spacing-2);
  left: 0;

  height: calc(100vh - var(--env-var-spacing-2) * 2);
  max-width: var(--env-var-side-bar-width);

  border: 1px solid var(--env-var-color-6);
  border-radius: var(--env-var-radius-1);
  background-color: var(--env-var-color-8);

  padding: var(--env-var-spacing-1) 0;
}

.home-layout > div {
  min-height: calc(100vh - var(--env-var-spacing-2) * 2);
  flex: 1;
}

.home-layout > div:has(> [class*="fallback__"]) {
  border: solid 1px var(--env-var-color-6);
  border-radius: var(--env-var-radius-1);
  border-style: dashed;
  background-color: var(--env-var-color-8);
  overflow: hidden;
  position: relative;
}
.home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -33%);
  z-index: 0;

  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 800px;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}