.grille-images-bouton {
width: 100%;
}
.grille-images-bouton__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--wp--style--block-gap, 16px);
}
@media (min-width: 640px) {
.grille-images-bouton__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.grille-images-bouton__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.grille-images-bouton__item {
min-width: 0;
}
.grille-images-bouton__link {
display: block;
color: inherit;
text-decoration: none;
}
.grille-images-bouton__link:hover,
.grille-images-bouton__link:focus {
text-decoration: none;
}
.grille-images-bouton__media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.grille-images-bouton__media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.grille-images-bouton__item:hover .grille-images-bouton__media > img,
.grille-images-bouton__item:focus-within .grille-images-bouton__media > img {
transform: scale(1.08);
} .grille-images-bouton__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: url(//www.cyril-bazin.com/wp-content/themes/cyril-bazin/assets/chart/rectangle_oblique_hover.svg) center / cover no-repeat;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.grille-images-bouton__item:hover .grille-images-bouton__overlay,
.grille-images-bouton__item:focus-within .grille-images-bouton__overlay {
opacity: 1;
}
.grille-images-bouton__plus {
display: block;
width: 30px;
height: 30px;
} .grille-images-bouton__btn {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 2;
margin: 0;
}
.grille-images-bouton__btn .wp-block-button__link {
white-space: nowrap;
}
.grille-images-bouton__link .grille-images-bouton__btn .wp-block-button__link {
pointer-events: none;
}