#app {
  display: grid;
  height: 100%;
  border: 1px solid #ccc;
  grid-template-columns: 500px auto;
}
@media (max-width: 1000px) {
  #app {
    grid-template-columns: 350px auto;
  }
}

.sidebar {
  background: #f4f4f4;
  padding: 1rem;
  border-right: 1px solid #ddd;
}
.sidebar .controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  justify-content: space-between;
}
.sidebar .controls-header {
  border-bottom: 1px solid #ccc;
  padding: var(--space-xs);
}
.sidebar .controls-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sidebar .controls-footer {
  padding: var(--space-xs);
  display: flex;
  gap: 1rem;
  justify-content: center;
  border-top: 1px solid #ccc;
}

.controls .control-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.controls .control-section .control {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.controls .control-section .control__heading {
  font-weight: 700;
}
.controls .control-section .control.ctrl-btn {
  width: fit-content;
}
.controls .control-section .control .n-switch {
  justify-content: flex-start;
}

.sb-modal {
  min-height: 35rem;
  width: 80vw;
  padding: var(--space-s);
  background-color: var(--white);
  display: grid;
  grid-template-rows: 3rem auto 3rem;
  align-items: center;
  gap: var(--grid-gap);
}
.sb-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sb-modal__close {
  cursor: pointer;
}
.sb-modal__img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--grid-gap) / 2);
}
.sb-modal__image {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
}
.sb-modal__img {
  object-fit: cover;
}
.sb-modal__content {
  height: 100%;
}
.sb-modal__footer {
  display: flex;
  justify-content: center;
}

.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background: transparent;
}

/*# sourceMappingURL=styles.css.map */