Tailwind CSS卡片布局异常：大屏下右侧图片无法完全对齐

开发网站时遇到布局异常：实现了三张InfoComponent卡片，第1、3张卡片图片居左，第2张图片居右，但大屏设备下第2张卡片的图片无法完全靠右显示，此前布局正常。

异常表现：第2张卡片的图片右侧存在空隙，无法贴合卡片右边缘，而第1、3张卡片的图片能正常贴合左边缘。

• flex容器空间分配不合理：第2张卡片的内容区未设置flex-1属性，无法占据卡片剩余宽度，导致图片容器无法被“推”到最右侧，和内容区挤在一起。
• 单位使用不恰当：卡片宽度和图片宽度使用vh（视口高度）作为单位，大屏设备下视口高度通常较小，会导致卡片宽度收缩，同时图片宽度同步变化，引发布局错位。
• 样式类冗余：第2张卡片的flex容器保留了rounded-l-xl类，虽不影响布局，但与右侧图片的圆角设置不一致，属于冗余代码。

1. 给内容区添加flex-1：让内容区自动填充卡片剩余空间，图片容器会被挤压到最右侧，贴合卡片边缘。
2. 替换vh单位：使用lg:max-w-[1200px]这类固定最大宽度，或lg:w-[80vw]基于视口宽度的单位，让大屏下卡片宽度更稳定。
3. 统一圆角设置：移除第2张卡片flex容器的rounded-l-xl，换成与卡片外层一致的rounded-2xl，保持样式统一。
4. 统一图片容器宽度：确保三张卡片的图片容器在相同断点下宽度一致，避免布局差异。

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<!-- 第1张卡片 -->
<section class="flex items-center justify-center">
  <article class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:max-w-[1200px] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl">
    <div class="flex h-full flex-col md:flex-row rounded-2xl">
      <div class="relative h-80 shrink-0 overflow-hidden rounded-t-xl md:h-full md:rounded-l-xl md:rounded-tr-none lg:w-[300px] md:w-[250px]">
        <img src="https://picsum.photos/500/500?implementations.jpeg" alt="Implementations 背景图" class="h-full w-full object-cover opacity-40" />
        <img src="https://picsum.photos/500/500?overlay1.svg" alt="Implementations 覆盖图" class="absolute inset-0 h-full w-full object-contain p-8" />
      </div>
      <div class="flex-1 p-8 md:px-8 lg:px-12 lg:mt-3 md:mt-0 sh:mt-3 sh:p-4 sh:px-6">
        <h2 class="text-4xl font-medium md:font-semibold text-white">Implementations</h2>
        <p class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light">
          Whether it’s adding a new module to your existing Oracle PeopleSoft application or replacing a legacy ERP, we will perform fit-gap analysis, write data conversion processes and any other activities you need to ensure a successful project.
        </p>
      </div>
    </div>
  </article>
</section>

<!-- 第2张卡片 -->
<section class="flex items-center justify-center">
  <article class="bg-zinc-600 hover:bg-zinc-500 mt-12 mx-6 lg:max-w-[1200px] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] rounded-2xl">
    <div class="flex h-full flex-col md:flex-row rounded-2xl">
      <div class="flex-1 p-8 md:px-8 lg:px-12 mt-3 sh:p-4 sh:px-6">
        <h2 class="text-4xl font-medium md:font-semibold text-white mt-4 md:mt-0">Upgrades</h2>
        <p class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light">
          To use the most exciting enhancements Oracle PeopleSoft has made in over a decade, you should be on application version 9.2. We'll get you on the latest 9.2 image and tools version all while using best practice techniques for a lower total cost of ownership.
        </p>
      </div>
      <div class="relative h-80 shrink-0 overflow-hidden rounded-t-xl md:h-full md:rounded-r-xl md:rounded-t-none lg:w-[300px] md:w-[250px]">
        <img src="https://picsum.photos/500/500?upgrading.jpeg" alt="Upgrades 背景图" class="h-full w-full object-cover opacity-40" />
        <img src="https://picsum.photos/500/500?overlay2.svg" alt="Upgrades 覆盖图" class="absolute inset-0 h-full w-full object-contain p-8" />
      </div>
    </div>
  </article>
</section>

<!-- 第3张卡片 -->
<section class="flex items-center justify-center">
  <article class="bg-blue-500 hover:bg-blue-400 mt-12 mx-6 lg:max-w-[1200px] md:w-[75vh] md:h-[60vh] lg:h-[30vh] sh:h-[65vh] md:mb-4 rounded-2xl">
    <div class="flex h-full flex-col md:flex-row rounded-2xl">
      <div class="relative h-80 shrink-0 overflow-hidden rounded-t-xl md:h-full md:rounded-l-xl md:rounded-tr-none lg:w-[300px] md:w-[250px]">
        <img src="https://picsum.photos/500/500?upgrading.jpeg" alt="Support 背景图" class="h-full w-full object-cover opacity-40" />
        <img src="https://picsum.photos/500/500?overlay3.svg" alt="Support 覆盖图" class="absolute inset-0 h-full w-full object-contain p-8" />
      </div>
      <div class="flex-1 p-8 md:px-8 lg:px-12 sh:p-4 sh:px-6 mt-2">
        <h2 class="text-4xl font-medium md:font-semibold text-white">Ongoing System Support & Enhancements</h2>
        <p class="max-w-4xl md:max-w-2xl my-8 md:my-2 lg:mt-4 sh:mt-4 md:mt-0 text-lg md:text-xl sh:text-md lg:text-xl tracking-wide md:tracking-wider text-white font-light">
          Are you taking full advantage of Integration Broker, using event mapping instead of modifying Oracle PeopleSoft delivered PeopleCode objects, or implementing Fluid? If the answer is no to any of the above, we'll turn that NO into a resounding YES.
        </p>
      </div>
    </div>
  </article>
</section>

内容的提问来源于stack exchange，提问作者Mike the Scripter