/* Gallery container */
.gallery { 
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}
.gallery img { 
    width: 100%; 
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    break-inside: avoid; 
}

overlay #similar-img {
	margin-top: 5%;
	font-size: 1.5rem;
	cursor: pointer;
}

a#similar-img {
    padding: 5px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
	color: white;
    text-decoration: none;
	font-size: 1.5rem;
}

.overlay #similar-img:hover {
	color: #A4FFEE;
}

/*------------- Change number of images per row for different screen widths -----------*/
@media (min-width: 2800px) {
  .img_container {
    width: calc(14% - 20px); /* 7 per row */
  }
}

@media (max-width: 1200px) {
  .img_container {
    width: calc(25% - 40px); /* 4 per row */
  }
}

@media (max-width: 900px) {
  .img_container {
    width: calc(33% - 30px); /* 3 per row */
  }
}

@media (max-width: 600px) {
  .img_container {
    width: calc(50% - 10px); /* 2 per row */
  }
}

@media (max-width: 400px) {
  .img_container {
    width: 100%; /* 1 per row */
  }
}

@media (max-width: 768px) {
	.header {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}

	.nav-links {
		flex-direction: column;
		gap: 1rem;
	}
}