@media screen and (max-width: 800px) {
  #title-right {
    grid-column: auto / span 2;
  }
  #portrait {
    flex-wrap: wrap;
    padding: 1rem 2rem;
    gap: 1rem;
  }
  .portrait-text {
    width: 75%;
  }
  .animate-slidein {
    animation: 4s slide-in 1 normal;
  }
}

@media (max-width: 900px) {
  .disciplines-header h2 {
    font-size: 1.8rem;
  }
  .disciplines-header .lead {
    font-size: 0.96rem;
    max-width: 100%;
  }
}

@media (max-width: 500px) {
  .portrait-image {
    max-width: 300px; /* Adjusts the max-width for smaller screens */
  }
}

@media (min-width: 500px) and (max-width: 900px) {
  .portrait-image {
    max-width: 400px; /* Adjusts the max-width for medium screens */
  }
  .portrait-description {
    gap: 14px;
  }
  .portrait-description h3 {
    font-size: 1.4rem;
  }
  .portrait-description p {
    font-size: 1.02rem;
  }
}

@media (min-width: 900px) {
  .portrait-image {
    max-width: 500px; /* Adjusts the max-width for larger screens */
  }
}

@keyframes slide-in {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0%);
  }
}

/* Mobile phones - 1 card per row, reduced padding */
@media (max-width: 768px) {
  .cards {
    gap: 1rem !important;
    padding: 1rem 0 !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 1.2rem !important;
  }
  .card h3 {
    font-size: 1.2rem !important;
  }
  .card p {
    font-size: 0.95rem !important;
  }
  .cards .card h3::before {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin-top: 0.2rem;
  }
  #disciplines {
    padding: 1rem 1rem 0 !important;
  }
}

/* Tablets - 2 cards per row */
@media (min-width: 769px) and (max-width: 1000px) {
  .cards {
    gap: 1.5rem;
  }
  .card {
    flex: 0 0 calc(50% - 1rem);
    width: calc(50% - 1rem);
    max-width: 100%;
    min-height: 250px;
  }
}

/* Desktop - 3 cards per row */
@media (min-width: 1001px) {
  .card {
    flex: 0 0 calc(33.333% - 1.5rem);
    width: calc(33.333% - 1.5rem);
    max-width: 420px;
    min-height: 280px;
  }
}