.aci-image-grid {
display: grid;
grid-template-rows: auto auto;
position: relative; grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
.aci-image-nogrid {
border-radius: 6px;
overflow: hidden;
position:relative;
}
.aci-image-nogrid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
}
.grid-block {
border-radius: 6px;
overflow: hidden;
position: relative;
}
.grid-block-1 {
grid-column: 1 / 5;
grid-row: 1 / span 2;
}
.grid-block-2, .grid-block-3{
grid-column: 5 / 8;
}
.grid-block-2 {
grid-row: 1; }
.grid-block-3 {
grid-row: 2;
}
.grid-block-4 {
grid-row: 3 / 3;
grid-column: 1 / 3;
}
.grid-block-5 {
grid-row: 3 / 3;
grid-column: 3 / 5;
}
.grid-block-6 {
grid-row: 3 / 3;
grid-column: 5 / 8;
}
.aci-image-grid img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.8s ease;
}
.aci-image-grid img:hover {
transform: scale(1.02);
}
.grid-large::after, .grid-small::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
pointer-events: none;
}
.grid-large:hover::after, .grid-small:hover::after {
opacity: 0.10;
}
.view-all-photos {
position: absolute;
bottom: 10px;
right: 10px;
background: rgb(255 255 255 / 82%);
color: black;
padding: 5px 10px;
cursor: pointer;
border-radius: 2px;
z-index: 2; transition: background-color 0.3s ease;
}
.view-all-photos:hover {
background: rgb(255 255 255);
}
#lightbox {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#lightbox-image {
max-width: 80%;
max-height: 80%;
}
#lightbox-close {
position: absolute;
top: 20px;
right: 40px;
font-size: 30px;
color: white;
cursor: pointer;
z-index: 1001; }
#lightbox-caption {
color: white;
}
#lightbox-prev, #lightbox-next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
z-index: 1001;
}
#lightbox-next {
right: 0;
border-radius: 3px 0 0 3px;
}
#lightbox-prev {
left: 0;
} @media screen and (max-width: 767px) {
.aci-image-grid {
grid-template-columns: repeat(2, 1fr); }
.grid-block-1 {
grid-column: 1 / 3;
grid-row: 1;
}
.grid-block-2 {
grid-column: 1 / 2;
grid-row: 2;
}
.grid-block-3 {
grid-column: 2 / 3;
grid-row: 2;
}
.grid-block-4 {
grid-column: 5 / 8;
grid-row: 2;
}
.grid-block-5 {
grid-column: 1 / 4;
grid-row: 3;
}
.grid-block-6 {
grid-column: 4 / 8;
grid-row: 3;
}
} .aci-title-overlay {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
font-size: 14px;
display: none;
width: fit-content;
pointer-events: none;
border-radius: 2px;
} .grid-block:hover .aci-title-overlay
{
display: block;
} .lightbox-content {
position: relative;
} .lightbox-image-container {
position: relative;
} #lightbox-info-icon {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 50%;
padding: 5px;
cursor: pointer;
z-index: 10;
transition: background-color 0.3s ease;
} #lightbox-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
text-align: center;
font-size: 14px;
display: none;
z-index: 9;
transition: opacity 0.3s ease;
} #lightbox-title {
color: white;
margin-top: 10px;
text-align: center;
width: 100%;
} #lightbox-image {
max-height: calc(100vh - 120px); width: auto;
height: auto;
}