.banner-box{
width: 95%;
max-width: 80rem;
margin: auto;
}
.banner-section {
margin: 1rem 0;
}
.banner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
width: 100%;
}
.banner-link,
.banner-placeholder {
border-radius: var(--radius-lg);
overflow: hidden;
border: 0.0625rem solid var(--border);
background: var(--bg-raised);
transition: border-color var(--t-fast);
display: block;
width: 100%;
}
.banner-link:hover,
.banner-placeholder:hover {
border-color: var(--accent-dim);
}
.banner-inner {
position: relative;
width: 100%;
height: 6.5rem;
overflow: hidden;
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.92);
transition: transform 0.5s ease, filter 0.3s ease;
}
.banner-link:hover .banner-img {
transform: scale(1.02);
filter: brightness(1);
}
.banner-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(255, 255, 255, 0.06) 50%,
transparent 60%
  );
background-size: 200% 100%;
background-position: -100% 0;
pointer-events: none;
transition: background-position 0s;
}
.banner-link:hover .banner-shimmer {
background-position: 200% 0;
transition: background-position 0.55s ease;
}
.banner-placeholder {
height: 6.5rem;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 0.375rem,
rgba(255, 255, 255, 0.015) 0.375rem,
rgba(255, 255, 255, 0.015) 0.75rem
  );
}
.banner-placeholder__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.banner-placeholder__icon {
font-size: 1.25rem;
color: var(--accent);
opacity: 0.3;
line-height: 1;
}
.banner-placeholder__text {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.4;
}
.banner-placeholder__sub {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.08em;
color: var(--text-muted);
opacity: 0.25;
}
@media (max-width: 48rem) {
.banner-box{
width: 98%;
max-width: 70rem;
margin: auto;
}
}
@media (max-width: 34rem) {
.banner-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 0.5rem;
  }
.banner-section {
padding: 0 0.625rem;
  }
.banner-inner,
.banner-placeholder {
height: 5rem;
  }
}