```json
{
"summary

我们正在创建一个校园生活页面的section，包含左右布局。
左边：一个大的卡片组件，使用图片作为背景图，底部有标题、摘要和阅读更多按钮，并且从底部到顶部有黑色渐变背景。
右边：两个左右并列的卡片，每个卡片包含4:3的封面图、黑色标题（限制三行）、内容摘要（限制三行）和阅读更多链接。

设计思路：
1. 整体布局：在较大屏幕上（md以上）采用左右布局，左边一个大的卡片，右边两个小卡片上下排列（在右边内部，两个小卡片在较大屏幕上是上下排列，但根据要求是左右并列，所以右边内部应该是两个小卡片并排，但在移动端上下排列）。
但是用户要求右边是“两个左右并列的卡片”，所以右边内部应该是两个卡片并排。所以整体布局如下：
- 大屏幕：左右布局（左边一个，右边两个并排）
- 移动端：上下布局（上面一个大的卡片，下面两个小卡片（小卡片在移动端也是上下排列，但用户要求小卡片左右并列，所以小卡片在移动端应该是并排？但是移动端宽度有限，并排可能放不下，所以小卡片在移动端应该变成上下排列）

2. 左边卡片：
- 使用背景图，设置背景图覆盖，并定位在卡片上。
- 底部渐变：使用绝对定位的渐变层，从底部到顶部黑色渐变（从透明到黑色）。
- 内容（标题、摘要、阅读更多）在底部，使用相对定位或flex布局使其在底部。

3. 右边两个卡片：
- 每个卡片包含：封面图（4:3）、黑色标题、内容摘要（限制三行）、阅读更多链接。
- 布局：两个卡片在右边并排，使用flex或grid布局。在移动端，两个卡片应该变成上下排列（或者并排但换行，但并排可能太挤，所以改为上下排列）。

4. 响应式：整体容器使用grid布局，大屏幕两列，小屏幕一列。右边内部两个卡片在大屏幕并排，小屏幕上下排列（或并排但换行，这里我们使用flex-wrap，小屏幕时每个卡片占满宽度）。

5. 图片选择：
- 左边卡片背景图：从商业类图片中选择，比如`/assets/images/16-9/business-01.jpg`
- 右边两个卡片的封面图：从展示图类中选择，比如`/assets/images/showcase/1.jpg`和`/assets/images/showcase/2.jpg`

6. 限制三行文本：使用`line-clamp`类（Tailwind CSS 3.1+ 支持），设置`line-clamp-3`。

7. 阅读更多链接样式：可以设计为带下划线的文本链接。

8. 整体结构：
<div class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 左边卡片 -->
<div class="relative h-96 rounded-xl overflow-hidden">
<img src="/assets/images/16-9/business-01.jpg" alt="校园活动" class="w-full h-full object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 text-white">
<h3 class="text-2xl font-bold mb-2">大型校园活动</h3>
<p class="mb-4">这里是活动的摘要内容，描述活动的精彩之处。</p>
<a href="#" class="text-white font-semibold underline">阅读更多</a>
</div>
</div>

<!-- 右边两个卡片 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-4">
<!-- 卡片1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="/assets/images/showcase/1.jpg" alt="活动1" class="w-full aspect-video object-cover" />
<div class="p-4">
<h4 class="text-lg font-bold text-black mb-2">活动标题1</h4>
<p class="text-gray-600 line-clamp-3 mb-4">这里是活动摘要内容，限制三行显示，多余部分省略。</p>
<a href="#" class="text-blue-600 font-semibold underline">阅读更多</a>
</div>
</div>
<!-- 卡片2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="/assets/images/showcase/2.jpg" alt="活动2" class="w-full aspect-video object-cover" />
<div class="p-4">
<h4 class="text-lg font-bold text-black mb-2">活动标题2</h4>
<p class="text-gray-600 line-clamp-3 mb-4">这里是活动摘要内容，限制三行显示，多余部分省略。</p>
<a href="#" class="text-blue-600 font-semibold underline">阅读更多</a>
</div>
</div>
</div>
</div>
</div>

但是注意：用户要求右边是“两个左右并列的卡片”，在右边内部，我们希望在较大屏幕上（比如lg以上）两个卡片是并排的，而在中等屏幕（md）上，由于右边整体只有一列，所以两个卡片应该上下排列。然而，在整体布局中，右边在md屏幕上是单独一列，所以右边内部在md屏幕上应该上下排列两个卡片，在lg以上屏幕并排？但是用户整体布局在md以上是左右两列（左边一个，右边一个列里面放两个卡片），那么右边内部在md屏幕上应该上下排列，在lg以上并排？但是我们的设计是，在整体布局中，右边在md屏幕上是单独一列，所以右边内部我们使用grid，在sm以上并排（即在小屏幕上并排？）这可能会复杂。

调整：
整体布局：在md以上屏幕，左边占1列，右边占1列（但右边内部的两个卡片在lg以上并排，在md屏幕上下排列？）但是md屏幕整体已经是左右两列，右边内部如果上下排列两个卡片，高度可能会超过左边。所以我们可以让右边内部始终并排？但是并排的话在md屏幕上右边内部两个卡片并排，那么每个卡片宽度就会比较小。或者我们让右边内部在md以上屏幕并排，在sm以下上下排列。

根据用户要求，右边是“两个左右并列的卡片”，所以在大屏幕（md以上）时，右边内部两个卡片应该是左右并排。但是整体布局在md以上是左右两列，右边那一列里面有两个并排的卡片，这样右边内部就需要再分两列。这样在md屏幕上，右边内部两个卡片并排，每个卡片宽度会很小（因为右边整体只有一半宽度）。所以可能不合适。

另一种方案：整体布局在md以上是左右两列，左边是大卡片，右边是两个小卡片上下排列（不是并排）。但是用户要求右边是左右并列，所以我们需要在右边内部使用flex或grid让两个小卡片并排。

考虑到在md以上屏幕，右边内部两个卡片并排，那么整体布局在md以上，左边占50%，右边占50%，然后右边内部再分两列（各50%）。这样在md以上屏幕，右边内部两个卡片并排，每个卡片宽度是右边宽度的50%。在移动端，整体布局变成一列，左边大卡片，然后右边两个卡片并排（在移动端并排可能太挤，所以移动端右边内部两个卡片上下排列）。

因此，右边内部布局：使用grid，在默认情况下（小屏幕）是1列（每个卡片占满宽度），在sm屏幕以上并排（两个卡片并排）。但是注意，整体布局在md以上是左右两列，所以右边内部在md以上屏幕并排是没问题的，在移动端整体一列，右边内部两个卡片并排可能太挤，所以我们在移动端让右边内部两个卡片上下排列（即grid-cols-1），在sm以上并排（grid-cols-2）。

但是，整体布局在md以上是左右两列（grid-cols-2），右边内部在sm以上并排（grid-cols-2），这样在md以上屏幕，右边内部两个卡片并排，每个卡片宽度为50%，这样右边内部两个卡片并排后，高度就会比较矮，左边大卡片高度可以设置为固定（比如h-96），右边内部两个卡片的高度会自动适应，我们可以让右边内部两个卡片的高度和左边大卡片高度一致吗？不太容易，因为左边大卡片是固定高度，右边内部两个卡片并排后高度会自适应（内容高度），可能不一致。

所以，我们可以让左边大卡片的高度和右边内部两个卡片的总高度自适应，不固定高度。但是左边大卡片有背景图，我们希望它有一个固定的比例，比如16:9。右边内部两个卡片的图片比例是4:3，所以高度不一致。

调整：左边大卡片使用aspect比例？比如aspect-[16/9]，这样高度根据宽度计算。右边内部两个卡片也使用比例，这样整体高度可以自动调整。

但是，用户要求左边卡片使用图片作为背景，并且有黑色渐变，所以我们可以设置左边卡片为aspect-video（16:9）。右边内部每个小卡片，封面图是4:3（使用aspect-video是16:9，所以我们需要aspect-[4/3]），但是整个小卡片的高度由内容和图片共同决定，我们可以让图片使用aspect-[4/3]，然后下面内容自适应。

因此，我们调整：
左边卡片：使用aspect-video（16:9）或者固定高度？用户要求底部渐变，所以内容在底部，固定高度可能更好控制。但是响应式固定高度可能在不同屏幕不一致。我们可以使用min-h-[300px]和h-[50vh]之类的？但是这里我们使用固定高度在大屏幕上，移动端自动高度？但是用户要求从底部到顶部的渐变，所以需要固定高度或者相对高度。我们使用h-96（24rem）在md以上，在移动端使用h-64。

右边内部两个卡片：不固定高度，由内容撑开。

所以，整体布局在移动端：左边卡片（h-64），右边内部两个卡片上下排列（每个卡片内容自适应）。
在md以上：左边卡片（h-96），右边内部两个卡片并排，高度由内容决定，可能不会和左边一样高，但我们可以让右边内部容器使用flex或者grid让两个卡片等高。

为了保持右边内部两个卡片等高，我们可以使用flex布局，并设置align-items: stretch（默认就是stretch），这样两个卡片等高。

修改右边内部布局：
<div class="flex flex-col sm:flex-row gap-4"> 但是这样在sm并排，在md以上也是并排，但是整体布局在md以上是左右两列，所以右边内部在md以上并排后，每个卡片宽度是50%，高度会拉伸到和容器一样高（容器高度由左边卡片决定？不，容器高度由内容决定，所以右边内部容器高度不会和左边一样高，除非我们设置网格行高相等）。

另一种方案：整体布局使用grid，并设置行高相等。我们可以设置整体网格为一行两列（md以上），然后右边内部再分为两列，但是这样行高相等需要设置整体网格的行高为1fr，但是左边卡片和右边容器高度就会相等，然后右边内部两个卡片高度可以设置为50%？这样不行。

综合考虑，我们让左边卡片高度固定（h-96），右边内部两个卡片高度自适应，不强制等高。这样设计可能更自然。

因此，最终结构：

<div class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 左边卡片 -->
<div class="relative h-64 md:h-96 rounded-xl overflow-hidden">
<img ... />
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6 text-white">
...
</div>
</div>

<!-- 右边两个卡片 -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- 卡片1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img ... class="aspect-[4/3] w-full object-cover" />
...
</div>
<!-- 卡片2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img ... class="aspect-[4/3] w-full object-cover" />
...
</div>
</div>
</div>
</div>

注意：右边两个卡片的容器，我们使用grid，在默认（小屏幕）一列，sm以上并排（两列）。这样在移动端，两个卡片上下排列；在sm以上屏幕并排。而整体布局在md以上是左右两列，所以右边内部在md以上屏幕并排，在sm和xs屏幕并排（但整体布局在sm和xs是一列，所以右边内部并排后，两个卡片会并排显示在整体一列的下方？这样可能太挤，所以我们需要调整：

整体布局在md以上是左右两列（gap-8），在md以下是一列（gap-8）。右边内部在整体一列（移动端）时，我们希望两个卡片并排（在sm屏幕并排，在xs屏幕上下排列）。所以右边内部我们设置为：grid grid-cols-1 sm:grid-cols-2 gap-4

这样：
在xs屏幕（小于640px）：grid-cols-1，两个卡片上下排列。
在sm屏幕（640px以上）到md屏幕（768px以上）：grid-cols-2，两个卡片并排。
在md以上屏幕，整体布局是左右两列，右边内部是并排的两个卡片，所以每个小卡片的宽度是右边宽度的50%。

但是，在sm屏幕（640px-768px）时，整体布局还是一列（因为整体布局在md以上才变成两列），所以右边内部两个卡片并排显示在整体一列的下方，这样是可以的，因为sm屏幕宽度足够并排两个卡片。

因此，这个结构是合理的。

代码实现：

注意：图片路径使用提供的图片，左边背景图使用商业类图片，右边封面图使用展示图。

另外，阅读更多链接我们使用蓝色下划线，但也可以根据整体风格调整。

我们开始编写代码。