@import url(./root.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background-color: var(--black);
}

.text-section {
  /* Campus Store's own gap between the screenshot and the heading below
     isn't literally identical across breakpoints either - it comes out
     to roughly 160px at ordinary desktop widths, purely as a product of
     its calc(100vw / 2.2) container height vs. its image's real ~1.87:1
     ratio and its -180px lift. Rather than reverse-engineer that same
     formula for a different image ratio, let the container always track
     the image's real (auto) height - removing the viewport-based
     guesswork entirely - and set margin-bottom directly per lift zone
     so the visible gap comes out to that same ~160px everywhere,
     matching Campus Store's typical desktop spacing exactly. */
  .img-container {
    height: auto !important;
    margin-bottom: -20px !important; /* lift -180px (matches Campus Store's own base value) */

    @media (max-width: 1440px) {
      height: auto !important;
      margin-bottom: -20px !important; /* lift is still -180px down to 992px */
    }

    @media (max-width: 992px) {
      margin-bottom: 60px !important; /* lift -100px here */
    }

    @media (max-width: 576px) {
      height: auto !important;
      margin-bottom: 110px !important; /* lift -50px here */
    }
  }
}

.why-campus-section {
  .why-campus-container {
    .why-campus-card {
      .first-card-p {
        max-width: 730px;
      }
      .seventh-card-p {
        max-width: 633px;
      }
      .eight-card-p {
        max-width: 730px;
      }
    }
  }
}

.partner-section {
  .partner-container {
    max-width: 1619px;
  }
}