.solutions-showcase {
position: relative;
display: block;
padding-top: 60px;
}
.swiper-services {
display: none;
}
.solutions-showcase .container {
position: relative;
display: flex;
justify-content: flex-end;
max-width: 1600px!important;
}
.solutions-grid {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
width: 100%;
margin: 0;
}
.solution-tile {
position: relative;
transition: var(--transition);
display: flex;
text-decoration: none;
width: calc((100% - (4 * 24px)) / 5);
aspect-ratio: 5/8;
}
.solution-tile_content {
background-color: var(--color-primary);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
border-radius: var(--border-radius);
padding: 24px;
min-height: 240px;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
width: 100%;
position: relative;
overflow: hidden;
will-change: transform;
transform: translateZ(0);
&[style*="background-image"]::before {
opacity: 1;
}
> * {
position: relative;
z-index: 1;
}
&:hover {
box-shadow: var(--box-shadow-hover);
cursor: pointer;
}
}
.solution-tile_bg-img {
transition: opacity 0.5s linear, transform 1s linear;
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
will-change: transform;
transform: translateZ(0) translateY(0);
backface-visibility: hidden;
}
.solution-tile_content:hover {
.solution-tile_bg-img {
opacity: 1;
transition: transform 40s linear;
transform: translateZ(0) translateY(40%);
}
}
.solution-tile_top {
display: flex;
}
.solution-tile_surtitre {
display: block;
font-size: var(--font-size-sm);
color: var(--color-primary);
.solution-tile_content[style*="background-image"] & {
color: #fff;
}
}
.solution-tile_bottom {
display: flex;
flex-direction: column;
}
h3.solution-tile_titre {
font-size: clamp(var(--font-size-md), 2vw, var(--font-size-lg));
font-weight: var(--font-weight-bold);
color: #fff;
line-height: 125%;
margin: 0;
.solution-tile_content[style*="background-image"] & {
color: #fff;
}
}
.solution-tile_description-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease-out, margin-top 0.4s ease, opacity 0.4s ease;
margin-top: 0;
opacity: 0;
}
.solution-tile_description-inner {
overflow: hidden;
}
.solution-tile:hover .solution-tile_description-wrapper {
grid-template-rows: 1fr;
margin-top: 10px;
opacity: 1;
}
.solution-tile_description {
color: #fff;
margin: 0!important;
font-size: var(--font-size-sm);
.solution-tile_content[style*="background-image"] & {
color: #fff;
}
} .swiper-services {
padding: 80px var(--container-padding-mobile);
position: relative;
overflow: visible;
}
.swiper-services .swiper-slide {
height: auto;
aspect-ratio: 5/8;
}
.swiper-services .solution-tile {
width: 100%;
height: 100%;
}
.swiper-services .solution-tile_content_slider {
background-color: var(--color-background-soft);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: var(--border-radius);
padding: 24px;
transition: var(--transition);
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
box-shadow: var(--box-shadow);
}
.swiper-services .solution-tile_content_slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 60%);
opacity: 1;
transition: var(--transition);
z-index: 0;
}
.swiper-services .solution-tile_content_slider > * {
position: relative;
z-index: 1;
}
.swiper-services .solution-tile:hover .solution-tile_content_slider {
box-shadow: var(--box-shadow-hover);
}
.swiper-services .services-img-wrap {
display: none;
}
.swiper-services .solution-tile_surtitre,
.swiper-services .solution-tile_titre,
.swiper-services .solution-tile_description {
color: #fff;
}
.swiper-services .solution-tile_titre {
font-size: var(--font-size-lg);
}
.swiper-services .solution-tile_top {
display: flex;
}
.swiper-services .solution-tile_bottom {
display: flex;
flex-direction: column;
}
.swiper-services .solution-tile_description-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease-out, margin-top 0.4s ease, opacity 0.4s ease;
margin-top: 0;
opacity: 0;
}
.swiper-services .solution-tile_description-inner {
overflow: hidden;
}
.swiper-services .solution-tile:hover .solution-tile_description-wrapper {
grid-template-rows: 1fr;
margin-top: 10px;
opacity: 1;
}
.swiper-services .swiper-pagination {
position: relative;
margin-top: 40px;
display: flex;
justify-content: center;
gap: 8px;
padding: 12px 16px;
}
.swiper-services .swiper-pagination-bullet {
width: 12px;
height: 12px;
padding: 0;
margin: 0 !important;
transition: var(--transition);
background-color: var(--color-secondary);
}
.swiper-services .swiper-pagination-bullet-active {
background-color: var(--color-primary);
width: 48px;
border-radius: 8px;
}
@media screen and (max-width: 1100px) { .solutions-showcase {
display: none;
}
.swiper-services {
display: block;
padding: 40px var(--container-padding-mobile);
}
}
@media screen and (max-width: 576px) {
.swiper-services .solution-tile_content_slider {
padding: 20px;
}
}