/* Override the default minimal theme layout */

/* First, let's target the main wrapper more specifically */
body .wrapper {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 800px) !important;
  gap: 3rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: start !important;
  padding: 2rem !important;
  width: 100% !important;
}

/* Target the header/sidebar specifically */
body .wrapper header {
  grid-column: 1 !important;
  position: static !important;
  width: auto !important;
  float: none !important;
}

/* Target the main section */
body .wrapper section {
  grid-column: 2 !important;
  width: auto !important;
  float: none !important;
}

/* Ensure images in main content don't overflow */
body .wrapper section img {
  max-width: 100%;
  height: auto;
}

/* Override any existing flexbox or float layouts */
body {
  margin: 1rem;
  padding: 0;
}

/* Make sure the grid layout works on smaller screens too */
@media screen and (max-width: 768px) {
  body .wrapper {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  body .wrapper header {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body .wrapper section {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}