.projects-button {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: calc(var(--offset) / 4 / var(--list-scale));
  min-height: calc(22px * var(--scale) / var(--list-scale));
}

.projects-button svg {
  width: calc(24px * var(--scale) / var(--list-scale));
  height: calc(24px * var(--scale) / var(--list-scale));
}

.projects-button .button-label {
  white-space: nowrap;
  text-transform: uppercase;
  font-size: calc(18px * var(--scale) / var(--list-scale));
  font-weight: 500;
  line-height: 1;
}

.projects-items {
  background-color: transparent;
  width: 100%;
}

.projects-items::before {
  content: '';
  display: block;
  width: 100%;
  background: #ebebeb;
  position: absolute;
  top: 100svh;
  bottom: 0;
  left: 0;
}

.projects-item {
  aspect-ratio: 1;
  position: relative;
}

.projects-item--button {
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  padding: calc(var(--offset) / var(--list-scale)) 0;
}

.projects-item:first-child {
  background: transparent;
  /* height: calc(100svh - 402px * var(--scale)); */
  height: 35vw;
}

.project-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.project-image-container {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

.project-image {
  aspect-ratio: 1;
}