.mg-highlights,
.mg-highlights * {
box-sizing: border-box;
}
.mg-highlights {
--mg-highlight-bg: #22323d;
--mg-highlight-bg-soft: #1f2a33;
--mg-highlight-border: rgba(255, 255, 255, 0.08);
--mg-highlight-text: #ffffff;
--mg-highlight-muted: rgba(255, 255, 255, 0.78);
--mg-highlight-primary: #64B5F6;
margin-bottom: 1.5rem;
padding: clamp(1.25rem, 2.8vw, 2rem);
background: linear-gradient(135deg, var(--mg-highlight-bg) 0%, var(--mg-highlight-bg-soft) 100%);
border: 1px solid var(--mg-highlight-border);
border-top: 3px solid rgba(100, 181, 246, 0.45);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
color: var(--mg-highlight-text);
}
.mg-highlights__title,
.mg-highlights-all-posts__title {
margin: 0;
color: #ffffff;
font-size: clamp(1.55rem, 3vw, 2rem);
line-height: 1.15;
}
.mg-highlights__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.25rem;
}
.mg-highlights__card {
min-width: 0;
margin: 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--mg-highlight-border);
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13);
transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.mg-highlights__link {
display: flex;
flex-direction: column;
min-height: 100%;
color: inherit;
text-decoration: none;
}
.mg-highlights__image {
position: relative;
overflow: hidden;
background: #102027;
border-radius: 8px 8px 0 0;
line-height: 0;
}
.mg-highlights__thumb,
.mg-highlights__placeholder {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
.mg-highlights__thumb {
object-fit: cover;
transition: filter 0.22s ease, transform 0.22s ease;
}
.mg-highlights__placeholder {
background:
linear-gradient(135deg, rgba(100, 181, 246, 0.14), rgba(25, 118, 210, 0.05)),
#102027;
}
.mg-highlights__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1rem;
}
.mg-highlights__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.65rem;
margin-bottom: 0.55rem;
color: var(--mg-highlight-muted);
font-size: 0.82rem;
line-height: 1.35;
}
.mg-highlights__meta span {
display: inline-flex;
align-items: center;
gap: 0.65rem;
}
.mg-highlights__meta span::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
background: var(--mg-highlight-primary);
border-radius: 999px;
}
.mg-highlights__card-title {
margin: 0;
color: var(--mg-highlight-text);
font-size: clamp(1.1rem, 1.8vw, 1.3rem);
line-height: 1.22;
}
.mg-highlights-all-posts {
margin: 0 0 1rem;
padding: 0 clamp(1.25rem, 2.8vw, 2rem);
}
@media (hover: hover) and (pointer: fine) {
.mg-highlights__card:hover {
border-color: rgba(100, 181, 246, 0.34);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
.mg-highlights__card:hover .mg-highlights__thumb {
filter: brightness(1.07) contrast(1.04);
transform: scale(1.025);
}
.mg-highlights__card:hover .mg-highlights__card-title {
color: var(--mg-highlight-primary);
}
}
.mg-highlights__link:focus-visible {
outline: 2px solid var(--mg-highlight-primary);
outline-offset: 3px;
}
@media (max-width: 900px) {
.mg-highlights__grid {
grid-template-columns: 1fr;
}
}