:root{--swiper-pagination-color:#001e37;--swiper-pagination-bullet-inactive-color:#7997af}
.modular-cards-component .bg-box.rds-background-navy{background-image:url("../../../../content/dam/repsol-lubricantes/gama-extreme/background.webp");background-size:cover;background-repeat:no-repeat}
.modular-cards-component .bg-box:not(.rds-background-navy){padding-top:40px}
@media(min-width:1024px){.modular-cards-component .bg-box:not(.rds-background-navy){padding-top:48px}
}
.modular-cards-component .bg-box:not(.rds-background-navy) .component-title{text-align:center;margin-bottom:8px}
.modular-cards-component .bg-box:not(.rds-background-navy) .component-description{text-align:center}
.modular-cards-component .component-title{margin-bottom:24px}
@media(min-width:1024px){.modular-cards-component .component-title{margin-bottom:32px}
}
.modular-cards-component .modular-card-component{border-radius:16px}
.modular-cards-component .modular-card-component::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,30,55,0.48);z-index:2;pointer-events:none}
.modular-cards-component .three-cards,.modular-cards-component .two-cards{display:flex;flex-direction:column;gap:16px}
@media(min-width:1024px){.modular-cards-component .three-cards,.modular-cards-component .two-cards{display:grid;gap:24px}
}
.modular-cards-component .three-cards .modular-card-component,.modular-cards-component .two-cards .modular-card-component{height:380px}
.modular-cards-component .three-cards .link-card[href]::before,.modular-cards-component .two-cards .link-card[href]::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.modular-cards-component .three-cards .modular-card-component,.modular-cards-component .two-cards .modular-card-component{position:relative}
.modular-cards-component .three-cards .wrapper-img,.modular-cards-component .two-cards .wrapper-img{height:100%}
.modular-cards-component .three-cards .wrapper-img img,.modular-cards-component .two-cards .wrapper-img img{height:100%;object-fit:cover}
.modular-cards-component .three-cards .wrapper-content,.modular-cards-component .two-cards .wrapper-content{position:absolute;bottom:0;left:0;width:100%;z-index:3;padding:16px;display:flex;flex-direction:column;gap:24px}
@media(min-width:1024px){.modular-cards-component .three-cards .wrapper-content,.modular-cards-component .two-cards .wrapper-content{padding:24px}
}
.modular-cards-component .three-cards .wrapper-content .wrapper-btn-card *,.modular-cards-component .two-cards .wrapper-content .wrapper-btn-card *{color:#fff}
.modular-cards-component .three-cards .wrapper-content .wrapper-btn-card .rp-link-click,.modular-cards-component .two-cards .wrapper-content .wrapper-btn-card .rp-link-click{position:relative;z-index:10;cursor:pointer}
@media(min-width:1024px){.modular-cards-component .two-cards .modular-card-component{height:100%}
}
.home-page .modular-cards-component:has(.rds-background-navy){margin-top:64px}
.home-page .modular-cards-component:has(.rds-background-navy) .component-title,.home-page .modular-cards-component:has(.rds-background-navy) .component-description{text-align:center}
.home-page .modular-cards-component:has(.rds-background-navy) .modular-card-component::after{display:none}
.home-page .modular-cards-component:has(.rds-background-navy) .bg-box.rds-background-navy{display:flow-root;max-width:none;margin-left:0;margin-right:0;margin-bottom:144px;padding-bottom:0;border-radius:0;background-image:none}
.home-page .modular-cards-component:has(.rds-background-navy) .bg-box.rds-background-navy>.component-title,.home-page .modular-cards-component:has(.rds-background-navy) .bg-box.rds-background-navy>.component-description,.home-page .modular-cards-component:has(.rds-background-navy) .bg-box.rds-background-navy>.cards{max-width:1184px;margin-left:auto;margin-right:auto}
@media(min-width:1024px){.home-page .modular-cards-component:has(.rds-background-navy) .bg-box.rds-background-navy{height:538px;padding-top:72px;margin-bottom:226px}
}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards{margin-bottom:-120px}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .modular-card-component{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
@media(min-width:1024px){.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .modular-card-component{height:532px;min-height:532px;max-height:532px}
}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-img{flex:0 0 auto;height:216px}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content{position:static;flex:1 1 auto;min-height:0;padding:0;justify-content:space-between}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card a{color:var(--rds-color-link-content-default)}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card a *{color:inherit}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card a:hover{color:var(--rds-color-link-content-state-hover)}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card .rp-btn.rds-button__ghost{display:inline-flex;align-items:center;flex-direction:row-reverse;gap:6px;width:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card .rp-btn.rds-button__ghost::after{display:none}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card .rp-btn.rds-button__ghost .icon-rp{margin:0;font-size:20px}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card .rp-btn.rds-button__ghost .text{position:relative}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card .rp-btn.rds-button__ghost .text::before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background-color:currentColor;transition:all .2s ease-in-out}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content .wrapper-btn-card .rp-btn.rds-button__ghost:hover .text::before{width:100%}
@media(min-width:1024px){.home-page .modular-cards-component:has(.rds-background-navy) .three-cards{margin-bottom:-166px}
.home-page .modular-cards-component:has(.rds-background-navy) .three-cards .wrapper-content-text .rds-body-01{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
}
.home-page .modular-cards-component:has(.rds-background-navy) .wrapper-btn{display:none}