.activite {
position: relative;
border-radius: 50px;
overflow: hidden;
}
.activite-container {
text-decoration: none;
color: var(--wp--preset--color--custom-blanc);
}
.activite-image {
display: flex;
}
.activite-image,
.activite-image img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
transition: transform 0.3s ease;
}
.activite-container:hover .activite-image img {
transform: scale(1.1);
}
.activite-content {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: var(--wp--preset--spacing--4);
}
.activite-content::before,
.activite-content::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
}
.activite-content::before {
height: 50%;
background: linear-gradient(to bottom, rgba(29, 30, 27, 1), rgba(29, 30, 27, 0));
opacity: 1;
}
.activite-content::after {
height: 100%;
background: linear-gradient(to bottom, rgba(29, 30, 27, 1), rgba(29, 30, 27, 1));
opacity: 0;
transform: translateY(0);
}
.activite-container:hover .activite-content::after {
opacity: 0.7;
}
.activite-content p {
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--5);
font-weight: 900;
color: var(--wp--preset--color--custom-blanc);
margin: 0;
text-transform: uppercase;
line-height: 1.2;
}
.activite-content img {
width: 31px;
height: 24px;
object-fit: contain;
margin: 0;
margin-top: 10px;
transform: rotate(0);
transition: all 0.3s ease;
}
.activite-container:hover .activite-content img {
transform: rotate(45deg);
}
@media (max-width: 768px) {
.activite-image {
aspect-ratio: 3/2;
}
.activite-content::before {
height: 100%;
}
}