.project {
  position: relative;
  z-index: 10;

  .box {
    position: fixed;
    inset: 0px;
    overflow-y: auto;

    position: relative;
    border-radius: var(--radius-base);
    background-color: var(--color-nested-1);
    padding: var(--space-5);
    margin: 10rem auto var(--space-5);
    width: 95%;

    .dark & {
      background-color: var(--color-nested-1-dark);
    }

    @media (min-width: 640px) {
      width: 66.66%;
    }

    .close-button {
      position: absolute;
      top: var(--space-2);
      right: var(--space-4);
      width: max-content;
      height: max-content;
    }

    .repo-link, .description, .technologies, .media-text {
      margin-top: var(--space-3);
    }

    .media {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-2);
    }
  }
}

.overlay {
  position: fixed;
  inset: 0px;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0.7;
}

.container {
  position: fixed;
  inset: 0px;
  overflow-y: auto;
}

.medium {
  width: 100%;

  img {
    width: 100%;
    border-width: 2px;
    cursor: pointer;
    border-color: var(--color-primary);

    .dark & {
      border-color: var(--color-primary-dark);
    }
  }
}

.big-image {
  z-index: 20;

  .image {
    max-width: 95%;
    max-height: 95%;
  }
}