/* 收银台（下载币充值 / 开通VIP）、联系客服弹层，以及 AI 生图、云渲染两个功能页 */

.yt-pay, .yt-contact, .yt-tool {
    --yt-brand: #FF2248;
    --yt-brand-soft: rgba(255, 34, 72, .08);
    --yt-ink: #242636;
    --yt-dark: #16171D;
    --yt-muted: #6B7080;
    --yt-line: #E4E7ED;
    --yt-soft: #F5F7FA;
    --yt-soft-2: #F0F2F5;
    --yt-green: #16A34A;
    color: var(--yt-ink);
}
.yt-icon {width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em;}
.yt-spin {animation: yt-spin 1s linear infinite;}
@keyframes yt-spin {to {transform: rotate(360deg);}}

/* ---------- 弹层外壳（本站 layui 的弹层类名前缀是 layer-） ---------- */
.yt-pay-layer {border-radius: 16px !important; box-shadow: 0 24px 64px rgba(22, 23, 29, .22) !important;}
.yt-pay-layer .layer-content {border-radius: 16px;}
.yt-pay-layer .layer-setwin {top: 14px; right: 14px; z-index: 2;}
.yt-pay-layer .layer-setwin .layer-close2 {position: static; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #F0F2F5; color: #6B7080; font-size: 14px; font-weight: 400; line-height: 32px;}
.yt-pay-layer .layer-setwin .layer-close2:hover {background: #E4E7ED; color: #242636;}

/* ---------- 顶栏：导航多了两项，收紧间距并把搜索框右移，避免压住导航 ---------- */
.page-header .layout-left.nav .nav-item a {padding: 0 14px 0 12px;}
.page-header .layout-search {left: 70%;}

/* ---------- 收银台 ---------- */
.yt-pay {display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 520px; font-size: 14px; line-height: 1.5; background: #fff;}
.yt-pay button {font-family: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;}
.yt-pay-main {min-width: 0; padding: 28px;}
.yt-pay-head {padding-right: 32px;}
.yt-pay-head-icon {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 10px; background: var(--yt-brand-soft); color: var(--yt-brand); font-size: 20px;}
.yt-pay-title {margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4;}
.yt-pay-desc {margin: 4px 0 0; color: var(--yt-muted);}
.yt-pay-account {display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding: 12px 0; border-top: 1px solid var(--yt-line); border-bottom: 1px solid var(--yt-line);}
.yt-pay-account span {color: var(--yt-muted);}
.yt-pay-account b {max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500;}
.yt-pay-section {margin-top: 24px;}
.yt-pay-section-head {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;}
.yt-pay-section-head h3 {margin: 0; font-size: 15px; font-weight: 500;}
.yt-pay-section-head span {color: var(--yt-muted); font-size: 12px; text-align: right;}
.yt-pay-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.yt-pay-grid.is-two {grid-template-columns: repeat(2, minmax(0, 1fr));}
.yt-pay .yt-pay-card {position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 144px; padding: 16px; border: 1px solid var(--yt-line); border-radius: 10px; background: #fff; text-align: left; transition: border-color .15s, background-color .15s;}
.yt-pay .yt-pay-card:hover {background: var(--yt-soft);}
.yt-pay .yt-pay-card:focus-visible {outline: 3px solid rgba(255, 34, 72, .25); outline-offset: 1px;}
.yt-pay .yt-pay-card.is-active {border-color: var(--yt-brand); background: rgba(255, 34, 72, .04);}
.yt-pay-badge {position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px; background: var(--yt-soft-2); color: var(--yt-ink); font-size: 12px; font-weight: 500; line-height: 18px;}
.yt-pay-badge.is-strong {background: var(--yt-brand); color: #fff;}
.yt-pay-card-label {color: var(--yt-muted);}
.yt-pay-badge + .yt-pay-card-label {padding-right: 84px;}
.yt-pay-card-title {font-weight: 500;}
.yt-pay-card-price {display: flex; align-items: baseline; gap: 4px; margin-top: 12px;}
.yt-pay-card-price em {font-size: 14px; font-weight: 500;}
.yt-pay-card-price b {font-size: 30px; font-weight: 600; line-height: 1.1;}
.yt-pay-card-price small {color: var(--yt-muted); font-size: 13px;}
.yt-pay-card-price s {margin-left: 6px; color: #A0A4AE; font-size: 12px;}
.yt-pay-bonus {align-self: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--yt-brand-soft); color: var(--yt-brand); font-size: 12px; font-weight: 500;}
.yt-pay-card-note {margin-top: 12px; padding-right: 24px; color: var(--yt-muted); font-size: 12px;}
.yt-pay-card-check {position: absolute; right: 12px; bottom: 12px; display: none; color: var(--yt-brand); font-size: 20px;}
.yt-pay-card.is-active .yt-pay-card-check {display: block;}
.yt-pay .yt-pay-card-custom {justify-content: center;}
.yt-pay .yt-pay-card-custom .yt-pay-card-note {margin-top: 8px;}
.yt-pay-tips {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px;}
.yt-pay-tip {display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: var(--yt-soft);}
.yt-pay-tip .yt-icon {margin-top: 2px; font-size: 16px;}
.yt-pay-tip .is-green {color: var(--yt-green);}
.yt-pay-tip .is-brand {color: var(--yt-brand);}
.yt-pay-tip b {display: block; font-weight: 500;}
.yt-pay-tip span {display: block; margin-top: 2px; color: var(--yt-muted); font-size: 12px;}

.yt-pay-side {display: flex; flex-direction: column; min-height: 440px; padding: 24px; border-left: 1px solid var(--yt-line); background: #FAFBFC;}
.yt-pay-due {text-align: center;}
.yt-pay-due-label {color: var(--yt-muted);}
.yt-pay-due-amount {display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 4px; color: var(--yt-brand);}
.yt-pay-due-amount em {font-size: 18px; font-weight: 500;}
.yt-pay-due-amount b {font-size: 36px; font-weight: 600; line-height: 1.15;}
.yt-pay-due-sub {display: block; margin-top: 8px; color: var(--yt-muted); font-size: 12px;}
.yt-pay-box {display: flex; flex: 1; flex-direction: column; margin-top: 20px; overflow: hidden; border: 1px solid var(--yt-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22, 23, 29, .05);}
.yt-pay-tabs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; border-bottom: 1px solid var(--yt-line); background: var(--yt-soft);}
.yt-pay .yt-pay-tab {display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 8px; color: var(--yt-muted); font-size: 14px; font-weight: 500;}
.yt-pay .yt-pay-tab:hover {color: var(--yt-ink);}
.yt-pay .yt-pay-tab.is-active {background: #fff; box-shadow: 0 1px 3px rgba(22, 23, 29, .12);}
.yt-pay .yt-pay-tab.is-wechat.is-active {color: #079A4B;}
.yt-pay .yt-pay-tab.is-alipay.is-active {color: #1677FF;}
.yt-pay-brand {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0;}
.yt-pay-brand svg {width: 100%; height: 100%;}
.yt-pay-brand.is-wechat {padding: 3px; border-radius: 6px; background: #07C160; color: #fff;}
.yt-pay-brand.is-alipay {color: #1677FF;}
/* 弹层高度在打开时就定了，二维码区按最高的「等待付款」状态留足高度，各状态切换时弹层不会冒出滚动条 */
.yt-pay-stage {display: flex; flex: 1; align-items: center; justify-content: center; min-height: 360px; padding: 20px;}
.yt-pay-state {display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center;}
.yt-pay-qr-frame {width: 206px; height: 206px; padding: 12px; overflow: hidden; border: 1px solid var(--yt-line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(22, 23, 29, .05);}
.yt-pay-qr-frame canvas, .yt-pay-qr-frame iframe {display: block; width: 180px; height: 180px; border: 0;}
.yt-pay-qr-holder {display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border: 1px solid var(--yt-line); border-radius: 10px; background: #fff; color: var(--yt-brand); font-size: 40px;}
.yt-pay-qr-holder.is-dashed {border-style: dashed; color: var(--yt-muted);}
.yt-pay-scan {display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font-weight: 500;}
.yt-pay-scan .yt-icon {color: var(--yt-brand); font-size: 16px;}
.yt-pay-state-title {margin: 16px 0 0; font-size: 18px; font-weight: 600;}
.yt-pay-state-text {margin: 8px 0 0; color: var(--yt-muted); font-size: 13px;}
.yt-pay-qr-holder + .yt-pay-state-text {margin-top: 16px;}
.yt-pay-waiting {display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--yt-brand); font-size: 12px;}
.yt-pay-success-icon {color: var(--yt-green); font-size: 64px; line-height: 1;}
.yt-pay .yt-pay-btn, .yt-contact .yt-pay-btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; margin-top: 20px; border-radius: 8px; background: var(--yt-brand); color: #fff; font-size: 14px; font-weight: 500;}
.yt-pay .yt-pay-btn:hover, .yt-contact .yt-pay-btn:hover {background: #E81D40; color: #fff;}
.yt-contact .yt-pay-btn.is-dark {background: var(--yt-dark);}
.yt-contact .yt-pay-btn.is-dark:hover {background: #000;}
.yt-pay-foot {margin-top: 20px; color: var(--yt-muted); font-size: 12px; text-align: center;}
.yt-pay-foot p {margin: 0 0 4px;}
.yt-pay-foot a {color: var(--yt-brand);}
.yt-pay-foot a:hover {text-decoration: underline;}

@media (max-width: 900px) {
    .yt-pay {grid-template-columns: minmax(0, 1fr);}
    .yt-pay-side {min-height: 0; border-top: 1px solid var(--yt-line); border-left: 0;}
}
@media (max-width: 600px) {
    .yt-pay-main {padding: 20px;}
    .yt-pay-grid, .yt-pay-tips {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .yt-pay-section-head {flex-direction: column; align-items: flex-start;}
    .yt-pay-section-head span {text-align: left;}
}

/* ---------- 联系客服弹层 ---------- */
.yt-contact {padding: 28px; font-size: 14px; line-height: 1.5; text-align: center; background: #fff;}
.yt-contact .yt-pay-head-icon {margin-bottom: 12px;}
.yt-contact-title {margin: 0; font-size: 18px; font-weight: 600;}
.yt-contact-desc {margin: 6px 0 0; color: var(--yt-muted);}
.yt-contact-qr {width: 200px; height: 200px; margin: 20px auto 0; padding: 10px; border: 1px solid var(--yt-line); border-radius: 12px; background: #fff;}
.yt-contact-qr img {display: block; width: 100%; height: 100%; max-height: none; border-radius: 4px;}
.yt-contact-tip {margin: 12px 0 0; color: var(--yt-muted); font-size: 13px;}

/* ---------- 功能页（AI 生图 / 云渲染） ---------- */
.yt-tool {padding: 24px 0 72px; background: #fff; font-size: 14px; line-height: 1.6;}
.yt-tool a {text-decoration: none;}
.yt-tool h1, .yt-tool h2, .yt-tool h3, .yt-tool p {margin: 0;}
.yt-tool button {font-family: inherit; border: 0; margin: 0; cursor: pointer;}

.yt-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s;}
.yt-tool .yt-btn-dark {background: var(--yt-dark); color: #fff;}
.yt-tool .yt-btn-dark:hover {background: #000; color: #fff;}
.yt-tool .yt-btn-light {background: #fff; color: var(--yt-dark);}
.yt-tool .yt-btn-light:hover {background: #F0F2F5; color: var(--yt-dark);}
.yt-tool .yt-btn-ghost {border: 1px solid rgba(255, 255, 255, .28); color: #fff;}
.yt-tool .yt-btn-ghost:hover {border-color: #fff; color: #fff;}
.yt-tool .yt-btn-brand {background: var(--yt-brand); color: #fff;}
.yt-tool .yt-btn-brand:hover {background: #E81D40; color: #fff;}
.yt-tool .yt-btn-outline {border: 1px solid var(--yt-line); background: #fff; color: var(--yt-ink);}
.yt-tool .yt-btn-outline:hover {border-color: var(--yt-ink); color: var(--yt-ink);}

.yt-hero {position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; min-height: 440px; padding: 56px 64px; overflow: hidden; border-radius: 24px; background: radial-gradient(640px 360px at 88% 8%, rgba(255, 34, 72, .32), transparent 70%), radial-gradient(520px 320px at 8% 110%, rgba(255, 255, 255, .06), transparent 70%), var(--yt-dark); color: #fff;}
.yt-eyebrow {display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px;}
.yt-eyebrow::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yt-brand); box-shadow: 0 0 0 4px rgba(255, 34, 72, .25);}
.yt-hero h1 {margin-top: 20px; font-size: 46px; font-weight: 700; line-height: 1.18; letter-spacing: .5px;}
.yt-hero h1 em {color: var(--yt-brand);}
.yt-hero-desc {max-width: 560px; margin-top: 16px; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.75;}
.yt-hero-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px;}
.yt-hero-meta {display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; color: rgba(255, 255, 255, .64); font-size: 13px;}
.yt-hero-meta span {display: inline-flex; align-items: center; gap: 6px;}
.yt-hero-meta .yt-icon {color: var(--yt-brand); font-size: 15px;}
.yt-panel {padding: 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px);}
.yt-panel-label {display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, .72); font-size: 13px;}
.yt-panel-label + * {margin-top: 10px;}
.yt-panel textarea {display: block; width: 100%; height: 112px; padding: 12px 14px; resize: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; outline: none; background: rgba(0, 0, 0, .24); color: #fff; font: inherit; font-size: 14px; line-height: 1.7;}
.yt-panel textarea:focus {border-color: rgba(255, 34, 72, .7);}
.yt-panel-group {margin-top: 16px;}
.yt-chips {display: flex; flex-wrap: wrap; gap: 8px;}
.yt-tool .yt-chip {height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .78); font-size: 13px;}
.yt-tool .yt-chip:hover {border-color: rgba(255, 255, 255, .4); color: #fff;}
.yt-tool .yt-chip.is-active {border-color: #fff; background: #fff; color: var(--yt-dark);}
.yt-panel-submit {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px;}
.yt-panel-submit span {color: rgba(255, 255, 255, .56); font-size: 12px;}
.yt-panel .yt-btn {height: 44px; padding: 0 24px; font-size: 14px;}
.yt-capability {display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);}
.yt-capability:first-of-type {padding-top: 4px;}
.yt-capability:last-of-type {border-bottom: 0;}
.yt-capability-icon {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: rgba(255, 34, 72, .16); color: #FF5A75; font-size: 20px;}
.yt-capability b {display: block; font-size: 15px; font-weight: 600;}
.yt-capability span {display: block; margin-top: 2px; color: rgba(255, 255, 255, .62); font-size: 13px;}
.yt-panel-foot {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1);}
.yt-panel-foot span {padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); font-size: 12px;}

.yt-section {margin-top: 64px;}
.yt-section-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px;}
.yt-section-head h2 {font-size: 26px; font-weight: 700; line-height: 1.3;}
.yt-section-head p {margin-top: 6px; color: var(--yt-muted);}
.yt-more {display: inline-flex; align-items: center; gap: 4px; color: var(--yt-muted); font-size: 14px; white-space: nowrap;}
.yt-more:hover {color: var(--yt-brand);}

.yt-cards {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.yt-cards.is-three {grid-template-columns: repeat(3, minmax(0, 1fr));}
.yt-card {display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--yt-line); border-radius: 18px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s;}
a.yt-card:hover, .yt-card.is-hover:hover {border-color: transparent; box-shadow: 0 12px 32px rgba(22, 23, 29, .08); transform: translateY(-2px);}
.yt-card-icon {display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--yt-brand-soft); color: var(--yt-brand); font-size: 22px;}
.yt-card h3 {margin-top: 18px; color: var(--yt-ink); font-size: 17px; font-weight: 600;}
.yt-card p {flex: 1; margin-top: 8px; color: var(--yt-muted); line-height: 1.7;}
.yt-card-link {display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; color: var(--yt-ink); font-weight: 500;}
a.yt-card:hover .yt-card-link {color: var(--yt-brand);}

.yt-style-grid {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px;}
.yt-style {display: flex; flex-direction: column; justify-content: flex-end; height: 120px; padding: 16px; border-radius: 16px; color: #fff; transition: transform .2s, box-shadow .2s;}
.yt-style:hover {color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22, 23, 29, .14);}
.yt-style b {font-size: 16px; font-weight: 600;}
.yt-style span {margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 12px;}

.yt-steps {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: yt-step;}
.yt-step {position: relative; padding: 24px; border-radius: 18px; background: var(--yt-soft);}
.yt-step-num {color: var(--yt-brand); font-size: 13px; font-weight: 700; letter-spacing: 1px;}
.yt-step h3 {margin-top: 10px; font-size: 17px; font-weight: 600;}
.yt-step p {margin-top: 6px; color: var(--yt-muted);}

.yt-tags {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.yt-tag-card {padding: 20px 24px; border: 1px solid var(--yt-line); border-radius: 18px;}
.yt-tag-card b {display: block; font-size: 16px; font-weight: 600;}
.yt-tag-card span {display: inline-block; margin-top: 10px; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: var(--yt-soft-2); color: var(--yt-ink); font-size: 12px;}

.yt-plan {display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--yt-line); border-radius: 18px;}
.yt-plan.is-featured {border-color: var(--yt-dark); box-shadow: 0 12px 32px rgba(22, 23, 29, .08);}
.yt-plan-name {display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 600;}
.yt-plan-name i {padding: 2px 10px; border-radius: 999px; background: var(--yt-brand); color: #fff; font-size: 12px; font-weight: 500;}
.yt-plan-desc {margin-top: 6px; color: var(--yt-muted);}
.yt-plan-price {margin-top: 20px; font-size: 22px; font-weight: 700;}
.yt-plan-price small {margin-left: 4px; color: var(--yt-muted); font-size: 13px; font-weight: 400;}
.yt-plan ul {flex: 1; margin: 18px 0 24px; padding-top: 18px; border-top: 1px solid var(--yt-line);}
.yt-plan li {display: flex; align-items: center; gap: 8px; padding: 5px 0;}
.yt-plan li .yt-icon {color: var(--yt-brand); font-size: 16px;}
.yt-plan .yt-btn {width: 100%;}

.yt-gallery {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;}
.yt-gallery-item {display: block; color: var(--yt-ink);}
.yt-gallery-pic {display: block; aspect-ratio: 21 / 16; overflow: hidden; border-radius: 14px; background: var(--yt-soft-2);}
.yt-gallery-pic img {display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; transition: transform .3s;}
.yt-gallery-item:hover .yt-gallery-pic img {transform: scale(1.04);}
.yt-gallery-title {display: block; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.yt-gallery-item:hover .yt-gallery-title {color: var(--yt-brand);}

.yt-cta {display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 64px; padding: 44px 56px; border-radius: 24px; background: radial-gradient(520px 260px at 100% 0%, rgba(255, 34, 72, .3), transparent 70%), var(--yt-dark); color: #fff;}
.yt-cta h2 {font-size: 28px; font-weight: 700;}
.yt-cta p {margin-top: 8px; color: rgba(255, 255, 255, .68);}
.yt-cta-actions {display: flex; gap: 12px; flex-shrink: 0;}

@media (max-width: 1200px) {
    .yt-hero {grid-template-columns: minmax(0, 1fr); padding: 40px;}
    .yt-cards, .yt-steps, .yt-tags {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .yt-style-grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
    .yt-gallery {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .yt-cta {flex-direction: column; align-items: flex-start;}
}