@charset "UTF-8";

.logo-box {
  max-width: 2000px;
  margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 40px;
	padding-left: 20px;
	padding-right: 20px;

  display: flex;
  align-items: center;
  justify-content: center;
}
.site-logo {
  max-width: 180px;   /* adjust as needed */
  width: 100%;
  height: auto;
  display: block;
}

/* Centers content and limits width */
.grid-wrapper {
  max-width: 2000px;
  margin: 0 auto;              /* center horizontally */
  padding: 0 20px;             /* side padding */
}
/* Responsive grid with max 4 columns */
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1400px) {
  .image-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .image-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .image-grid { grid-template-columns: 1fr; }
}
.image-grid img {
  width: 100%;
  height: auto;
  display: block;
  transform: translate(var(--x, 0), var(--y, 0));
}
/* Apply small variations */
.image-grid img:nth-child(3n) {
  --x: 6px;
  --y: -4px;
}
.image-grid img:nth-child(4n) {
  --x: -8px;
  --y: 4px;
}
.image-grid img:nth-child(5n) {
  --x: 4px;
  --y: 8px;
}
.image-grid img:nth-child(odd) {
  transform: rotate(-0.5deg);
}
.image-grid img:nth-child(even) {
  transform: rotate(0.5deg);
}