.loyola-section {
  /* You can keep empty if you don’t need background */
}

.loyola-section-div {
  display: flex;
  padding: 12px 70px;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.loyola-left-layout img,
.loyola-right-layout img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}



/* ===========================
   Tablet (max-width: 992px)
   =========================== */
@media (max-width: 992px) {
  .loyola-section-div {
    padding: 12px 40px;
    gap: 20px;
  }

  .loyola-left-layout img,
  .loyola-right-layout img {
    max-width: 80%;
    margin: 0 auto;
  }
}



/* ===========================
   Mobile (max-width: 768px)
   =========================== */
@media (max-width: 768px) {
  .loyola-section-div {
    flex-direction: column;
    padding: 20px;
    text-align: center;
  }

  .loyola-left-layout img,
  .loyola-right-layout img {
    max-width: 70%;
  }
}



/* ===========================
   Small Mobile (max-width: 480px)
   =========================== */
@media (max-width: 480px) {
  .loyola-left-layout img,
  .loyola-right-layout img {
    max-width: 90%;
  }

  .loyola-section-div {
    padding: 15px 10px;
    gap: 15px;
  }
}