.galerie-liens {
width: 100%;
} .galerie-liens__gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--wp--style--block-gap, 10px);
} .galerie-liens--justify-centre:not(.galerie-liens--grille) .galerie-liens__gallery {
justify-content: center;
}
.galerie-liens--justify-droite:not(.galerie-liens--grille) .galerie-liens__gallery {
justify-content: flex-end;
} .galerie-liens--grille .galerie-liens__gallery {
display: grid;
grid-template-columns: repeat(var(--gl-cols-mobile, 1), minmax(0, 1fr));
flex-wrap: unset;
overflow-x: visible;
-webkit-overflow-scrolling: auto;
}
.galerie-liens--grille .galerie-liens__item {
width: 100%;
min-width: 0;
}
@media (min-width: 769px) {
.galerie-liens--grille .galerie-liens__gallery {
grid-template-columns: repeat(var(--gl-cols, 4), minmax(0, 1fr));
}
} .galerie-liens--gap-aucun .galerie-liens__gallery {
gap: 0;
}
.galerie-liens--gap-petit .galerie-liens__gallery {
gap: 0.35rem;
}
.galerie-liens--gap-moyen .galerie-liens__gallery {
gap: 0.85rem;
}
.galerie-liens--gap-grand .galerie-liens__gallery {
gap: 1.75rem;
} .galerie-liens--align-gauche .galerie-liens__item {
align-items: flex-start;
}
.galerie-liens--align-droite .galerie-liens__item {
align-items: flex-end;
}
.galerie-liens--align-etirer .galerie-liens__item {
align-items: stretch;
}
.galerie-liens--align-etirer .galerie-liens__label {
text-align: center;
width: 100%;
} .galerie-liens__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
width: 122px;
} .galerie-liens__img-wrap {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.galerie-liens__img-wrap > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.galerie-liens--ronds .galerie-liens__img-wrap,
.galerie-liens--ronds .galerie-liens__img-wrap > img,
.galerie-liens--ronds .galerie-liens__overlay,
.galerie-liens--ronds .galerie-liens__overlay--plein::before {
border-radius: 9999px;
}
.galerie-liens__item:hover .galerie-liens__img-wrap > img,
.galerie-liens__item:focus-visible .galerie-liens__img-wrap > img {
transform: scale(1.08);
} .galerie-liens__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;
}
.galerie-liens__item:hover .galerie-liens__overlay,
.galerie-liens__item:focus-visible .galerie-liens__overlay {
opacity: 1;
}
.galerie-liens__plus {
display: block;
width: 30px;
height: 30px;
} .galerie-liens__overlay--plein {
background: none;
}
.galerie-liens__overlay--plein::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.galerie-liens__voir {
position: relative;
display: inline-block;
padding: 0 1em 0 0;
margin: 0;
font-size: var(--wp--preset--font-size--3);
font-weight: 700;
line-height: 1.2;
color: var(--wp--preset--color--primary);
background: none;
border: none;
box-shadow: none;
text-transform: uppercase;
transition: padding-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}
.galerie-liens__item:hover .galerie-liens__voir,
.galerie-liens__item:focus-visible .galerie-liens__voir {
padding-right: 1.5em;
}
.galerie-liens__voir::after {
content: '';
position: absolute;
right: 0.15em;
top: 50%;
transform: translateY(-50%);
height: 0.85em;
aspect-ratio: 9.048 / 21.133;
background-color: currentColor;
-webkit-mask-image: url(//www.cyril-bazin.com/wp-content/themes/cyril-bazin/assets/chart/arrow-lien-voir.svg);
mask-image: url(//www.cyril-bazin.com/wp-content/themes/cyril-bazin/assets/chart/arrow-lien-voir.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 1;
flex-shrink: 0;
transition: opacity 0.4s ease;
} .galerie-liens__label {
font-size: var(--gl-text-fs, 0.9rem);
font-weight: 700;
color: var(--gl-label-color, var(--wp--preset--color--primary));
line-height: 1.2;
text-align: center;
transition: color 0.3s ease;
}
.galerie-liens--align-gauche .galerie-liens__label,
.galerie-liens--align-droite .galerie-liens__label {
text-align: inherit;
}
.galerie-liens__item:hover .galerie-liens__label,
.galerie-liens__item:focus-visible .galerie-liens__label {
color: var(--wp--preset--color--default);
}
.wp-block-cover .galerie-liens__item:hover .galerie-liens__label,
.wp-block-cover .galerie-liens__item:focus-visible .galerie-liens__label {
color: var(--wp--preset--color--secondary);
} @media (max-width: 1024px) {
.galerie-liens:not(.galerie-liens--grille) .galerie-liens__item {
width: 100px;
}
}
@media (max-width: 768px) {
.galerie-liens:not(.galerie-liens--grille) .galerie-liens__gallery {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
justify-content: flex-start;
}
.galerie-liens:not(.galerie-liens--grille) .galerie-liens__gallery::-webkit-scrollbar {
display: none;
}
.galerie-liens:not(.galerie-liens--grille) .galerie-liens__item {
flex-shrink: 0;
width: 100px;
}
}
@media (max-width: 480px) {
.galerie-liens:not(.galerie-liens--grille) .galerie-liens__item {
width: 90px;
}
.galerie-liens__label {
font-size: var(--gl-text-fs, 0.8rem);
}
}