CSS卡片在Grid布局中旋转适配打印页面的问题求助

我正在修改一个生成打印用参考卡片的JavaScript脚本，原本脚本每页会生成9张小卡片的网格布局，现在需要改成每页3张大卡片，且第3张卡片横向放置来适配8.5×11英寸的打印页面。

我没有JS、CSS、HTML相关经验，下面是我的尝试和遇到的问题：

• 先把卡片基础尺寸设为 height: 6in; width: 4in，然后给第3n+3个卡片添加样式：nth-child(3n+3) {margin-bottom: 1in; rotate: 270;}，但实际效果是所有卡片先排好版再旋转第3张，最后变成2×2的网格，而且旋转后的卡片位置完全不符合预期。
• 如果把第3张卡片的尺寸改成 height:4in; width: 6in;，虽然能得到想要的卡片比例，但每页只能放下2张纵向卡片加1张横向卡片，我需要的是第3张卡片保持纵向的尺寸（6in×4in），但旋转后横向显示。
• 我猜测应该旋转卡片里的内容而不是卡片本身，但尝试添加 nth-child(3n+3) .card-contents {transform: rotate(90deg);} 后没有任何变化。

以下是我当前的代码：

JavaScript 代码 #

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery-3.4.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
var style = document.createElement("style");
style.innerHTML = "#cards_btn {font-size: 0.8em;margin-top: 0.1em;border-radius: 50%;}" +
  "body.cards {/* Set the background to gray to visualize the page size in the print preview */background-color: lightgray;min-width: initial !important;margin: 0 !important;--border-radius: 0;}" +
  "body.cards main#lienzo {display: flex;flex-wrap: wrap;justify-content: center;width: 8.5in;margin: auto;}" +
  "body.cards main article.result:first-child,body.cards main article.result:nth-child(2) {margin-top: 0.5in;}" +
  "body.cards main article.result:nth-child(3n + 3) {margin-bottom: 1in; height: 4in;width: 6in; content: rotate: -90deg}" +
  "body.cards main article.result:nth-child(3n+3) .card-contents {transform: rotate(90deg);}" +
  "body.cards article.result {padding: 10px 10px;height: 6in;width: 4in;display: flex;flex-direction: column;border: 1px dashed black;border-radius: var(--border-radius);position: relative;}" +
  "@media print {@page {margin: 0;size: 8.5in 11in !important;-webkit-print-color-adjust: exact;}" +
  "body.cards>header {display: none !important;}" +
  "body.cards, body.cards main#lienzo {background-color: initial;}}";
document.getElementsByTagName('head')[0].appendChild(style);
$(document).ready(function () {
  $("main > script").remove();
  document.title = document.title + " - Cards";
  $("body").addClass('cards');
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

内容的提问来源于stack exchange，提问作者Weird Ice