/* Ignite CSS for Portfolio Pages */

.portfolio-card-5 {
    position: relative;
    margin-bottom: 20px; /* Reduced vertical spacing between items */
}

.portfolio-thumb img {
    width: 100%;
    height: auto; /* Maintain aspect ratio based on inline width and height attributes */
    object-fit: cover;
    display: block;
}

.portfilio-card-title {
    color: white;
}

.portfilio-card-title:hover {
    color: #0a657c'
}

.filter-item {
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out; /* Smooth transition after re-calculation */
    width: calc(50% - 15px); /* Two items per row with spacing */
    flex-grow: 1; /* Make items responsive */
}

.masonary-active {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between grid items */
    justify-content: center;
    align-items: flex-start; /* Align items to the start to prevent stacking */
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .filter-item {
        width: 100%; /* Each item takes full width on mobile */
    }
    
    .masonary-active {
        gap: 10px; /* Smaller gap on mobile for tighter spacing */
    }
}

/* Add clearfix to avoid layout issues with floats */
.masonary-active::after {
    content: "";
    display: table;
    clear: both;
}

#lcl_title {
    text-align: center;
}

/* Unrelated, but needed to add this CSS to keep the Side Menu from showing on mobile (Google Chrome, specifically) */
@media (max-width: 768px) {
    .sidemenu-wrapper {
        display: none !important;
    }
}