.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{
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-top: 60px;
}
.gallery-grid > a,
.gallery-grid > .wp-video,
.gallery-grid > p{
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 > .wp-video video,
.gallery-grid > p img{
width: 100% !important;
height: 100%;
object-fit: cover;
object-position: center;
transition: all 0.5s ease;
}
.gallery-grid > a:hover img
.gallery-grid > p a:hover img{
transform: scale(1.03);
}
@media(max-width: 1200px){
.gallery-grid > a,
.gallery-grid > p{
width: calc((100% - 48px) / 3) !important;
}
}
@media(max-width: 800px){
.gallery-grid > a,
.gallery-grid > p{
width: calc((100% - 24px) / 2) !important;
}
}
@media(max-width: 600px){
.gallery-grid{
row-gap: 12px;
margin-top: 40px;
}
.gallery-grid > a,
.gallery-grid > p {
width: 100%;
max-width: 450px;
margin: auto;
}
}
.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;
}
}