.gallery-filter{
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.gallery-filter button{
background-color: transparent;
border: none;
color: var(--main-accent);
font-size: 16px;
padding: 10px 12px;
border-radius: var(--border-radius-small);
color: #371819;
font-weight: 600;
transition: all 0.2s ease;
border: 2px dashed transparent;
}
.gallery-filter button.active{
background-color: var(--blue-color);
color: #371819;
border-color: #f29c99;
}
.gallery-filter button:hover{
background-color: transparent;
transform: translateY(-2px);
}
.gallery-page{
overflow-y: hidden;
}
.gallery-grid,
.gallery-grid > p {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-top: 60px;
}
.gallery-grid .wp-caption .wp-caption-text{
display: none;
}
.gallery-grid > a,
.gallery-grid > .wp-video{
width: calc((100% - 72px) / 4) !important;
aspect-ratio: 1/1;
height: auto;
object-fit: cover;
object-position: center;
display: block;
overflow: hidden;
border-radius: var(--border-radius-small);
}
.gallery-grid > a img,
.gallery-grid > p > a img,
.gallery-grid > .wp-video video{
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
transition: all 0.5s ease;
}
.gallery-grid > a:hover img{
transform: scale(1.03);
}
.gallery-load-more{
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
@media(max-width: 1200px){
.gallery-grid > a{
width: calc((100% - 48px) / 3) !important;
}
}
@media(max-width: 800px){
.gallery-grid > a{
width: calc((100% - 24px) / 2) !important;
}
}
@media(max-width: 600px){
.gallery-grid{
row-gap: 12px;
margin-top: 40px;
column-gap: 12px;
}
.gallery-grid > a{
width: 100%;
max-width: 450px;
margin: auto;
}
.gallery-filter{
gap: 4px;
}
}
.container {
max-width: 1340px;
padding: 0px 30px;
margin: auto;
width: 100%;
}
.container .container{
max-width: 100% !important;
padding: 0px !important;
margin: unset !important;
width: 100% !important;
}
@media (max-width: 1400px) {
.container {
max-width: 1200px;
}
}
@media (max-width: 600px) {
.container {
padding: 0px 10px;
}
}
.gallery-load-more {
position: relative;
overflow: hidden;
background-color: var(--accent);
color: #fff;
border: 0;
border-radius: var(--radius-small);
padding: 10px 16px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
cursor: pointer;
transition:
background-color .3s ease,
transform .3s ease,
box-shadow .3s ease;
display: inline-block;
box-shadow:
0 2px 4px rgba(0, 0, 0, .08);
} .gallery-load-more:hover {
background-color: #371819;
color: #fff;
transform: translateY(-2px);
box-shadow:
0 6px 14px rgba(0, 0, 0, .14);
} .gallery-load-more:active {
transform: translateY(1px) scale(.98);
box-shadow:
0 2px 5px rgba(0, 0, 0, .12);
transition-duration: .08s;
} .gallery-load-more:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 255, 255, .9),
0 0 0 5px var(--accent);
} .gallery-load-more:disabled {
opacity: .65;
cursor: wait;
transform: none;
box-shadow: none;
}
.gallery-load-more::after {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, .18),
transparent
);
transform: skewX(-20deg);
transition: left .5s ease;
}
.gallery-load-more:hover::after {
left: 125%;
}