/* TEAMS PAGE — INWARD-FACING HELMETS
   The template selects supplied viewpoints. Position the image itself; never mirror it. */
.teams-directory-page .franchise-card {
  grid-template-rows: auto;
  column-gap: clamp(16px, 2vw, 28px);
}

.teams-directory-page .franchise-card__visual {
  height: clamp(280px, 30vw, 380px);
}

.teams-directory-page .franchise-card__image {
  justify-content: flex-end;
}

.teams-directory-page .franchise-card:nth-child(even) .franchise-card__image {
  justify-content: flex-start;
}

.teams-directory-page .franchise-card__image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.teams-directory-page .franchise-card__body {
  min-width: 0;
  padding-inline: clamp(12px, 1.5vw, 24px);
}

.teams-directory-page .franchise-card h2 {
  max-width: none;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Right-facing helmets need a narrower left column so they do not drift
   toward the page center. Keep the copy gutter independent of image width. */
@media (min-width: 641px) {
  .teams-directory-page .franchise-card:nth-child(odd) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .teams-directory-page .franchise-card:nth-child(odd) .franchise-card__image {
    justify-content: center;
  }

  .teams-directory-page .franchise-card:nth-child(odd) .franchise-card__body {
    padding-left: 0;
  }
}

/* Existing mobile rows stack. Center the supplied asset without changing its viewpoint. */
@media (max-width: 640px) {
  .teams-directory-page .franchise-card {
    row-gap: 12px;
  }

  .teams-directory-page .franchise-card__visual {
    height: clamp(240px, 70vw, 290px);
  }

  .teams-directory-page .franchise-card__image,
  .teams-directory-page .franchise-card:nth-child(even) .franchise-card__image {
    justify-content: center;
  }

  .teams-directory-page .franchise-card__body {
    padding-inline: 0;
  }
}