.masonry {
    columns: 4;
    column-gap: 1rem;
    padding: 1rem;
	padding-right:0;
}

.masonry-item {
    background-color: white;
    margin-bottom: 1rem;
    padding: 1rem 0;
    border-radius: 8px;
    /* box-shadow: 0 0 5px rgba(0,0,0,0.1); */
    break-inside: avoid;
}

.masonry-item:nth-child(odd) {
    width: 100%;    
	/* height: 150px; */	
}

.masonry-item:nth-child(even) {
    width: 100%;    
	/* height: 250px; */
}


@media (max-width: 1200px) {
    .masonry {
        columns: 3;
    }
}

@media (max-width: 800px) {
    .masonry {
        columns: 2;
    }
}

@media (max-width: 500px) {
    .masonry {
        columns: 2;
		column-gap: 5px;
		padding: 5px 0;
   }
   .masonry-item {
		background-color: white;
		margin-bottom: 10px;
		padding: 5px 0;
		border-radius: 8px;
		/* box-shadow: 0 0 5px rgba(0,0,0,0.1); */
		break-inside: avoid;
	}
}
/*---------- mansory image ------- */
/* Default styling for larger screens */
.masonry-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
	border:1px solid var(--bg2);
	border-bottom:0;
}

/* Medium screens (tablets) */
@media (max-width: 800px) {
    .masonry-item img {
        width: 90%; /* Reduce size to 80% of its container */
        margin: 0 auto; /* Center the image */
    }
}

/* Small screens (phones) */
@media (max-width: 500px) {
    .masonry-item img {
        width: 90%; /* Reduce size to 70% of its container */
        margin: 0 auto; /* Center the image */
    }
}

/*---------- mansory title ------- */
.masonry a {
	color: inherit; /* Inherit color from parent element */
}

.masonry a:hover {
	text-decoration:none; 
}

.masonry-title {
    color:#333;
	font-size:0.9rem;
	text-align: center;
    width: 100%; /* Make it match the image width by default */
    padding: 8px;
	box-sizing: border-box;
    background-color: var(--bg3);
	border:1px solid var(--bg2);
    transition: background-color 0.3s, color 0.3s;
}

/* Medium screens (tablets) */
@media (max-width: 800px) {
    .masonry-item img,
    .masonry-title {
        width: 90%; /* Match image and title width */
        margin: 0 auto; /* Center them */
    }
}

/* Small screens (phones) */
@media (max-width: 500px) {
    .masonry-item img,
    .masonry-title {
		font-size:0.9rem;
		width: 94%; /* Match image and title width */
        margin: 0 auto; /* Center them */
    }
}