.gallery-container{
padding-bottom: 10px;
}
.galeria__container .gallery {
display: flex;
gap: 20px;
height: 500px;
overflow: hidden;
}
.galeria__container .gallery .gallery-item-large {
flex: 3;
height: 100%;
position: relative;
}
.galeria__container .gallery .gallery-item-large img {
width: 100%;
height: 100%;
object-fit: cover;
}
.galeria__container .gallery .gallery-column-small {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
height: 100%;
}
.galeria__container .gallery .gallery-column-small .gallery-item-small {
flex: 1;
position: relative;
height: calc(100% / 3 - 10px / 3);
overflow: hidden;
}
.galeria__container .gallery .gallery-column-small .gallery-item-small img {
width: 100%;
height: 100%;
object-fit: cover;
}
.galeria__container
.gallery
.gallery-column-small
.gallery-item-small
.view-more-button {
position: absolute;
top: 50%;
left: 50%;
padding: 10px 25px;
background-color: #fff;
color: var(--font-color);
border: none;
cursor: pointer;
border-radius: 20px;
font-size: 14px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
width: auto;
justify-content: center;
text-wrap: nowrap;
}
.galeria__container
.gallery
.gallery-column-small
.gallery-item-small
.view-more-button
img {
width: 20px;
border-radius: 0;
margin-right: 12px;
}
.galeria__container
.gallery
.gallery-column-small
.gallery-item-small:last-child
> img {
filter: contrast(0.5);
}
.galeria__container .gallery img {
border-radius: 8px;
}
.galeria__container .view-more-button--mobile {
display: none;
}
.gallery-container .gallery__items {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
width: 100%;
gap: 20px 25px;
}
.gallery-container .gallery__items .gallery__item {
height: 160px;
position: relative;
}
.gallery-container .gallery__items .gallery__item img {
border-radius: 8px;
object-fit: cover;
width: 100%;
height: 100%;
}
.gallery-container .gallery__items .gallery__item img:hover {
cursor: pointer;
}
.gallery-container .gallery__items .gallery__item:nth-child(n + 6) {
display: none;
}
.gallery-container .gallery__items .gallery__item:has(.view-more-button) img {
filter: contrast(0.5);
}
.gallery-container .gallery__items .gallery__item .view-more-button {
position: absolute;
top: 50%;
left: 50%;
padding: 10px 25px;
background-color: #fff;
color: var(--font-color);
border: none;
cursor: pointer;
border-radius: 20px;
font-size: 14px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
width: auto;
justify-content: center;
text-wrap: nowrap;
}
.gallery-container .gallery__items .gallery__item .view-more-button img {
width: 20px;
border-radius: 0;
margin-right: 12px;
}
.gallery-container .gallery__items .gallery__item--large {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 2;
height: 100%;
}
@media (max-width: 768px) {
.gallery {
height: auto !important;
}
.gallery-item-large {
height: 240px !important;
aspect-ratio: 16 / 9;
}
.gallery-column-small {
display: none !important;
}
.view-more-button--mobile {
display: flex !important;
position: absolute;
right: 15px;
bottom: 12px;
background-color: #fff;
color: var(--font-color);
border: none;
border-radius: 20px;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
line-height: 16px;
font-weight: 700;
padding: 13px 23px;
}
.view-more-button--mobile img {
width: 20px !important;
aspect-ratio: 1;
object-fit: contain !important;
border-radius: 0 !important;
}
.gallery-container .gallery__items {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
}
.gallery-container
.gallery__items
.gallery__item:not(.gallery__item--large) {
display: none;
}
.gallery-container .gallery__items .gallery__item--large {
height: 240px;
}
}