.oggi-benefits-strip {
background: #fff;
padding: 16px 0 8px;
position: relative;
}
.oggi-benefits-strip--full {
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.oggi-benefits-strip__inner {
max-width: var(--oggi-container);
margin: 0 auto;
padding: 0 20px;
}
.oggi-benefits-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.oggi-benefits-strip__item {
position: relative;
border-radius: 14px;
overflow: hidden;
background: #fff;
display: block;
text-decoration: none !important;
min-width: 0;
}
.oggi-benefits-strip__item img {
width: 100%;
height: auto;
display: block;
}
.oggi-benefits-strip__placeholder {
width: 100%;
aspect-ratio: 7 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--oggi-lime-50);
color: var(--oggi-navy);
border: 2px dashed var(--oggi-lime);
border-radius: 12px;
padding: 18px;
text-align: center;
font-family: var(--oggi-font-display);
}
.oggi-benefits-strip__placeholder-label {
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
}
.oggi-benefits-strip__placeholder-hint {
font-size: 10.5px;
font-weight: 500;
color: var(--oggi-muted);
}
.oggi-benefits-strip__placeholder-hint code {
background: #fff;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
color: var(--oggi-navy);
font-family: monospace;
}
@media (max-width: 1100px) {
.oggi-benefits-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.oggi-benefits-strip { padding: 10px 0; }
.oggi-benefits-strip__inner { padding: 0 12px; }
.oggi-benefits-strip__grid {
grid-template-columns: repeat(4, 76%);
gap: 10px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
scroll-snap-type: x mandatory;
}
.oggi-benefits-strip__grid::-webkit-scrollbar { display: none; }
.oggi-benefits-strip__item {
scroll-snap-align: start;
}
}
.oggi-benefits-strip[class*="oggi-benefits-strip--bg-"] {
background: transparent;
padding: 20px 0;
}
.oggi-benefits-strip[class*="oggi-benefits-strip--bg-"] .oggi-benefits-strip__inner {
padding: 32px;
border-radius: 28px;
}
.oggi-benefits-strip--bg-pink .oggi-benefits-strip__inner { background: var(--oggi-bg-pink); }
.oggi-benefits-strip--bg-sky .oggi-benefits-strip__inner { background: var(--oggi-bg-sky); }
.oggi-benefits-strip--bg-lime .oggi-benefits-strip__inner { background: var(--oggi-bg-lime); }
.oggi-benefits-strip--bg-orange .oggi-benefits-strip__inner { background: var(--oggi-bg-orange); }
.oggi-benefits-strip--bg-amber .oggi-benefits-strip__inner { background: var(--oggi-bg-amber); }
.oggi-benefits-strip--bg-violet .oggi-benefits-strip__inner { background: var(--oggi-bg-violet); }
.oggi-benefits-strip--bg-mint .oggi-benefits-strip__inner { background: var(--oggi-bg-mint); }
.oggi-benefits-strip--bg-navy .oggi-benefits-strip__inner { background: var(--oggi-navy); }
.oggi-benefits-strip[class*="oggi-benefits-strip--bg-"] .oggi-benefits-strip__item {
background: transparent;
}
.oggi-benefits-strip .oggi-pcar__kicker {
color: var(--oggi-navy-500, #2B4A88);
}
.oggi-benefits-strip--bg-navy .oggi-pcar__kicker { color: rgba(255, 255, 255, .88); }
.oggi-benefits-strip--bg-navy .oggi-pcar__heading { color: #fff; }
.oggi-benefits-strip--bg-navy .oggi-pcar__link {
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.oggi-benefits-strip--bg-navy .oggi-pcar__link:hover {
color: var(--oggi-lime);
border-color: var(--oggi-lime);
}
@media (max-width: 560px) {
.oggi-benefits-strip[class*="oggi-benefits-strip--bg-"] .oggi-benefits-strip__inner {
padding: 20px 16px;
border-radius: 20px;
}
}