@charset "UTF-8";
#projects-container {
  padding-top: var(--spacer);
  position: relative;
  z-index: 8;
}

.projects-wrapper {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 24px;
  width: var(--page-width);
  margin: 0 auto var(--spacer); /* centered */
  box-sizing: border-box; /* makes sure padding/borders don’t add width */
}

.projects-wrapper * {
  box-sizing: border-box;
}

.col-large {
  grid-column: span 3;
}

.col-medium {
  grid-column: span 2;
}

.col-small {
  grid-column: span 1;
}

#projects-container a {
  text-decoration: none;
  color: var(--black-grey);
}

#projects-container a:hover {
  color: var(--purple-blue);
}

.pagination-wrapper a {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  padding: 4px 2px;
}

.pagination-wrapper a:hover {
  color: var(--purple-blue);
  border-bottom: 1px solid var(--purple-blue);
}

.current-page {
  color: var(--purple-blue);
  border-bottom: 1px solid rgb(208, 208, 208);
}

/* Vertical layouts */
@media (width <= 950px) {
  .projects-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .col-large, .col-small {
    grid-column: span 2; /* full width across both cols */
  }
}