.related-section {
margin-top: var(--section-gap);
} .related-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: 32px 36px 36px;
}
.related-head {
margin-bottom: 22px;
}
.related-head .section-title {
margin: 0;
}
.rg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
} .rg-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--radius-card);
overflow: hidden;
background-size: cover;
background-position: center;
background-color: #1e293b;
text-decoration: none;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-smooth),
box-shadow var(--transition-smooth);
}
.rg-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
} .rg-overlay {
display: none;
}
.rg-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(27, 47, 99, 0.90) 0%,
rgba(27, 47, 99, 0.55) 35%,
transparent 70%
);
pointer-events: none;
z-index: 1;
transition: background var(--transition-smooth);
}
.rg-card:hover::after {
background: linear-gradient(
to top,
rgba(27, 47, 99, 0.92) 0%,
rgba(27, 47, 99, 0.60) 35%,
transparent 70%
);
}
.rg-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px;
}
.rg-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 8px;
}
.rg-title {
font-size: 19px;
line-height: 1.3;
font-weight: 700;
color: #fff; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rg-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.rg-meta {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
.rg-read {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
opacity: 0.85;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.rg-card:hover .rg-read {
opacity: 1;
transform: translateX(2px);
} .rg-more-wrap {
display: flex;
justify-content: center;
margin-top: 32px;
}
.rg-grid.is-loading {
opacity: 0.45;
pointer-events: none;
transition: opacity var(--transition-fast);
} @media (max-width: 1024px) {
.rg-grid {
grid-template-columns: repeat(2, 1fr);
}
.rg-grid .rg-card:nth-child(3) {
display: none; }
}
@media (max-width: 680px) {
.related-section {
margin-top: var(--section-gap-sm);
}
.related-card {
padding: 24px 20px 28px;
}
.rg-grid {
grid-template-columns: 1fr;
}
.rg-grid .rg-card:nth-child(3) {
display: block;
}
.rg-more {
width: 100%;
}
}