.pet-hero {
      background-color: #0000000D;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
      text-align: center;
      padding: 24px 15px;
    }
    .pet-title h1 {
      font-size: 34px;
      font-family: 'Bubblegum Sans', cursive;
      color: #4B1C0E;
      margin: 0;
    }
    .pet-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
        font-size: 24px;
      gap: 10px;
      margin-top: 10px;
      color: #4B1C0E;
      font-weight: 500;
    }
    .pet-breadcrumb a { color: #818181; text-decoration: none; }
    .pet-main { margin-top: 24px; }
    .pet-image-column { display:flex; justify-content:center; align-items:flex-start; }

    /* Wrapper enforces desired visual size on desktop while remaining responsive */
    .pet-image-wrapper {
      width: 100%;           /* responsive by default */
      max-width: 1200px;     /* don't get wider than desired */
      margin: 0 auto;        /* center horizontally */
      aspect-ratio: 1080 / 955; /* preferred aspect ratio */
      border-radius: 12px;   /* optional rounded corners */
      overflow: hidden;      /* crop overflow */
      box-sizing: border-box;
    }

    /* The image should fill the wrapper, keep cover behavior */
    .pet-image {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: cover;
      border-radius: 12px;
    }

    /* On wide screens explicitly set exact pixel dimensions to match requirement */
    @media (min-width: 992px) {
      .pet-image-wrapper {
        width: 1200px !important;      /* exact width requested */
        height: 1066px !important;      /* exact height requested */
        aspect-ratio: auto !important; /* override aspect-ratio so height is fixed */
      }
    }

    .pet-details { padding: 10px 18px; }
    .pet-details h3 { font-size: 26px; margin-top:0; font-family: 'Bubblegum Sans', cursive; color:#4B1C0E; }
     h2 { font-size: 36px; margin-top:0; font-family: 'Bubblegum Sans', cursive; color:#4B1C0E; }
    .pet-meta { color:#5C6265; margin-top:30px; margin-bottom: 40px; font-size: 36px; font-family: 'Cabin', sans-serif; text-align: justify}
    .pet-description { color:#333; line-height:1.4; }
    .btn-adopt { background:#6DAB3C; color:#fff; margin: 40px 0 140px 0; border: 0; border-radius:6px; font-weight: bold; font-size: 45px; font-family: 'Bubblegum Sans', cursive; padding: 15px 30px}
    .btn-voltar { margin: 55px 0 0; font-size: 30px; font-family: 'Bubblegum Sans', cursive; padding: 10px 14px; text-decoration: none; box-shadow: none; border: 0}

    /* Responsive rules */
    @media (max-width: 991px) {
      /* On tablets/phones use full width and keep the aspect ratio */
      .pet-image-wrapper { width: 100%; }
      .pet-meta { font-size: 18px; }
      .btn-adopt, .btn-voltar { font-size: 16px; padding: 8px 12px; }
    }
    @media (max-width: 767px) {
      .pet-title h1 { font-size: 26px; }
      .pet-hero { padding: 18px 12px; }
    }
