.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.form-container {
  position: relative;
}

.preview-container {
  position: sticky;
  top: var(--spacing-xl);
  max-height: calc(100vh - 100px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.feature-item,
.roadmap-item {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  align-items: center;
}

@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .preview-container {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }
  
  .readme-raw,
  .readme-preview {
    flex: none;
    height: 400px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: var(--spacing-sm);
  }
  
  .form-container,
  .preview-container {
    padding: var(--spacing-lg);
  }
  
  .checkbox-group {
    grid-template-columns: 1fr;
  }
  
  .output-header {
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: stretch;
  }
}