@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

div.gallery {
	border: 1px solid #ccc;
	float: left;
	width: 280px;
	border-radius: 13px;
	cursor: pointer;
	margin: 15px;
	display:flex;
	border: 2px solid #777;
	transition: 400ms;
	box-shadow: 4px 7px 7px 0px #00000042;
	
		
}
div.gallery:hover{
	transform: scale(1.03);
}

div.gallery img {
	max-width: 100%;
	height: 200px;
	vertical-align: middle;
	display: inline-block;
	border-radius: 13px;
	box-shadow: 4px 7px 7px 0px #00000042;
	align-content: center;
	
}

.gridcontainer {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust the minmax width as needed */
}


/* Pagination styles (if needed) */
.pagination-container {
	margin: 40px auto;
	text-align: center;
	display: flex;
	width: 50%;
	
}

.pagination {
	position: relative;
	margin: auto;
}

.pagination a {
	position: relative;
	display: inline-block;
	color: #2c3e50;
	text-decoration: none;
	font-size: 1.0rem;
	padding: 8px 16px 10px;
}

.pagination a:before {
	z-index: -1;
	position: absolute;
	height: 100%;
	width: 100%;
	content: "";
	top: 0;
	left: 0;
	background-color: #2c3e50;
	border-radius: 24px;
	transform: scale(0);
	transition: all 0.2s;
}

.pagination a:hover, .pagination a .pagination-active {
	    color: #fff;
		background-color: #2c3e50;
		border-radius: 12px;
}

.pagination a:hover:before, .pagination a .pagination-active:before {
	transform: scale(1);
}

.pagination .pagination-active {
	color: rgb(64, 0, 64);
	background-color: #00000042;
}

.pagination .pagination-active:before {
	transform: scale(1);
}

.pagination-newer {
	margin-right: 50px;
}

.pagination-older {
	margin-left: 50px;
}
 /* Add this CSS to your Gallery.css or create a new CSS file */
.img-row {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}

.gallery {
    margin-bottom: 20px;
    text-align: center;
}

.pagination-container {
    margin-top: 20px;
    text-align: center;
}

.pagination {
    /*display: inline-block;*/
    padding: 8px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination-inner {
    display: inline-block;
}



/* Adjust the alignment for larger screens */
@media screen and (min-width: 1403px) {
    .gridcontainer {
		display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 0px 14px;
       
    }
 }  
 

@media screen and (min-width: 1203px) {
    .gallery {
		display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 0px 14px;
    }
}