.champion-profile-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  max-width: 1024px;
  margin: auto;
}

.champion-profile-wrapper .start-date {
  font-size: 1rem;
  color: #ac4b98;
}

.champion-profile {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 1rem; /* Spacing between items */
  margin: auto;
  flex-direction: row; /* Default layout for larger screens */
}

/* Ensure the champion-header is always at the top */
.champion-profile .champion-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  order: -1; /* Always place it first in the flex container */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .champion-profile {
      flex-direction: column; /* Stack items vertically on smaller screens */
  }

  .champion-profile .champion-header {
      order: -1; /* Still ensures champion-header is at the top */
  }
}


.champion-profile .name-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.champion-profile .name-wrapper > strong {
  text-transform: capitalize;
  font-size: 2rem;
  line-height: 1;
  color: #4a2c4b;
}

.champion-profile .name-wrapper > i {
  color: #ac4b98;
  font-weight: bold;
}

.champion-profile .champion-image {
  width: 100%; /* Make it responsive by default */
  max-width: 240px; /* Restrict the width on larger screens */
  height: auto; /* Maintain aspect ratio */
  overflow: hidden;
  border: 4px solid #ba0c8a;
  border-radius: 1rem;
  text-align: center;
}

/* Fix the width and height for larger screens */
@media (min-width: 768px) {
  .champion-profile .champion-image {
      width: 240px; /* Fixed width for desktop */
      height: 240px; /* Fixed height for desktop */
  }
}

.champion-profile .champion-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}



/* .champion-profile .champion-info h2 {
  font-size: 28px;
  margin-top: 10px;
  color: #333;
} */

.champion-profile .position {
  font-size: 16px;
  color: #666;
  font-style: italic;
}

.champion-profile .champion-biography {
  text-align: left;
  flex: 1;
}

.champion-profile .champion-biography h2 {
  padding: unset !important;
}

.champion-profile .champion-biography p {
  color: #333;
}

.champion-profile .carousel-container {
  margin-top: 30px;
}

.champion-profile .carousel-item img {
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.message-button-wrapper {
  width: 100%;
}

.message-button-wrapper > a {
  margin-top: 1rem;
  background: #4a2c4b;
  color: white;
  width: 100%;
  border-radius: 0.5rem;
}

.message-button-wrapper > a:hover {
  color: #d9d4d4;
}

#page-local-lead_champions-profile #region-below-content {
  margin-bottom: 2rem;
}

.card [role='main'] h2:first-of-type {
  margin: unset;
  padding: unset;
  border-bottom: unset;
}

#page-local-lead_champions-profile #region-main-box,
#page-local-lead_champions-profile #region-main-bottom {
  margin: auto;
  width: 80%;
}