* {
padding: 0;
margin: 0;
}
.portfolio-grid-container {
max-width: 90vw;
width: 95%;
margin: auto;
padding: 30px;
}
.photo-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.column {
display: flex;
flex-direction: column;
gap: 20px;
}
.photo {
position: relative;
cursor: pointer;
}
.photo img {
width: 100%;
height: 100%;
border-radius: 1px;
filter: brightness(100%);
border: none;
animation: fadeIn 1s;
transition: filter 0.5s ease, border 1s ease, width 0.5s ease, height 0.5s ease, animation 0.8s ease-in-out;
}
.photo img.enlarged {
max-width: 90vw;
max-height: 700px;
margin-top: 60px !important;
margin-bottom: 90px;
width: auto;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 995;
filter: brightness(100%) !important;
background-color: rgba(255, 255, 255, 0.482);
border: 30px solid rgba(255, 255, 255, 0.363);
animation: fadeIn 1s;
}
.photo.enlarged:hover .portfolio-text {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.photo:hover .portfolio-text {
opacity: 1;
cursor: pointer;
}
.photo:hover img {
filter: brightness(80%);
}
.portfolio-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
text-align: center;
opacity: 0;
transition: opacity 1s ease;
z-index: 994 !important;
}
.portfolio-text h2 {
font-family: 'Julius Sans One';
color: white;
font-size: 30px;
font-weight: 700;
}
.portfolio-text h3 {
font-family: 'Nunito';
color: white;
font-weight: light;
font-size: 15px;
}
@media (max-width: 1380px) {
.photo-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 965px) {
.photo-gallery {
display: grid;
grid-template-columns: repeat(1, 1fr) !important;
}
}