.layer--desktop {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "readme     .  contact"
    "projects   .  writing"
    "experience .  ."
    ".          .  .";
  padding: 20px 60px;
  gap: 8px;
}

.desktop-icon[data-id="contact"],
.desktop-icon[data-id="writing"] {
  justify-self: end;
}

.desktop-icon {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  gap: 4px;
  cursor: url('../assets/hand1_sm.png'), pointer;
  padding: 8px;
  user-select: none;
  text-align: center;
  width: fit-content;
}

.desktop-icon:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.desktop-icon--disabled {
  cursor: url('../assets/arrow1_sm.png'), default;
  opacity: 0.75;
}

.desktop-icon__img {
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
}

.desktop-icon__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-icon-label);
}