/* === style/site-content.css === */

/* === Base styles === */
.site-content-wrapper {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  padding: 2rem;
  box-sizing: border-box;
  width:98vw;
  background-color: chocolate;
  margin:0 auto;
  text-align: left;
}

/* === First two sections (Vision & Mission) === */
.site-content-wrapper > section:nth-child(1) {
  background-color: aliceblue;
  color: #003366;
  padding: 2rem;
  border-radius: 6px;
  box-sizing: border-box;
  width: 50%;
  float: left;
  margin: auto auto;
  display: inline;
}

.site-content-wrapper > section:nth-child(2) {
  background-color: aliceblue;
  color: #003366;
  padding: 2rem;
  border-radius: 6px;
  box-sizing: border-box;
  width: 50%;
  float: left;
  margin: auto auto;
}


/* === Make them side-by-side on desktop === */
@media (min-width: 768px) {
  .site-content-wrapper {
    flex-wrap: wrap; /* Let children wrap */
  }

  .site-content-wrapper > section:nth-child(1),
  .site-content-wrapper > section:nth-child(2) {
    width: calc(50% - 1rem);
  }

  .site-content-wrapper > section:nth-child(1) {
    margin-right: 2rem;
  }

  /* All others get full width */
  .site-content-wrapper > section:nth-child(n+3) {
    width: 100%;
  }
}

/* On mobile, stack them */
@media (max-width: 767px) {
  .site-content-wrapper > section {
    width: 100%;
    margin: 0;
  }
}