.fp-lineup {
padding: 64px 0;
background: linear-gradient(to bottom, #002040, #003366, #002040);
position: relative;
overflow: hidden;
}
.fp-lineup__pattern {
position: absolute;
inset: 0;
opacity: 0.05;
background-image:
linear-gradient(rgba(207, 255, 4, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(207, 255, 4, 0.1) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
}
.fp-lineup__header {
text-align: center;
margin-bottom: 48px;
}
.fp-lineup__title {
font-size: 26px;
color: #ffffff;
margin: 0 0 16px;
font-weight: 600;
text-align: center;
}
.fp-lineup__subtitle {
font-size: 16px;
color: #D1D5DC;
margin: 0;
line-height: 1.625;
text-align: center;
}
.fp-lineup__card {
background: #ffffff;
border-radius: 16px;
padding: 48px;
box-shadow: var(--fp-shadow-2xl);
margin-bottom: 48px;
}
.fp-lineup__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.fp-lineup__vendor {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
transition: all 0.3s;
text-decoration: none;
color: inherit;
}
.fp-lineup__vendor:hover {
transform: scale(1.1);
}
.fp-lineup__logo {
height: 60px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.fp-lineup__logo img {
max-height: 60px;
max-width: 100%;
width: auto;
object-fit: contain;
}
.fp-lineup__vendor-desc {
min-height: 2.5em; margin-bottom: 16px;
}
.fp-lineup__vendor-desc p {
font-size: 16px;
color: #4A5568;
text-align: center;
line-height: 1.3;
margin: 0;
}
.fp-lineup__vendor-divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(153, 161, 175, 0.3), transparent);
}
.fp-lineup__cta {
text-align: center;
} @media only screen and (min-width: 769px) {
.fp-lineup__grid {
gap: 32px;
}
}
@media only screen and (max-width: 768px) {
.fp-lineup__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 640px) {
.fp-lineup__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.fp-lineup__card {
padding: 24px;
}
.fp-lineup__logo {
height: 60px;
}
.fp-lineup__logo img {
max-height: 60px;
}
}