.project {
  position: relative;

  .project-close {
    --width-project-close: 1.6rem;

    & > svg {
      display: block;
      width: var(--width-project-close);
      height: var(--width-project-close);
    }

    &:hover,
    &:focus {
      color: var(--color-white);
    }

    &[aria-hidden='true'] {
      display: none;
    }
  }
}

.grid-project {
  display: grid;
  grid-gap: 1rem;

  & .grid-project__intro {
    grid-row-start: 1;
  }

  & .grid-project__content {
    grid-row-start: 3;
  }

  & .grid-project__gallery {
    grid-row-start: 2;
  }
}

@media screen and (min-width: 60rem) {
  .grid-project {
    & .grid-project__intro {
      grid-row-start: 2;
    }

    & .grid-project__content {
      grid-row-start: 3;

      display: grid;
      gap: 2rem;
      grid-template-columns: 22rem 22rem;
    }

    & .grid-project__gallery {
      grid-row-start: 1;
    }
  }
}

.project-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;

  > li {
    flex-shrink: 0;
  }
}

@media screen and (min-width: 60rem) {
  .project-gallery {
    flex-wrap: nowrap;

    > li {
      flex-shrink: 0;

      &:last-child {
        padding-right: var(--padding);
      }
    }
  }
}

.description {
  &.description--hidden {
    max-height: 3.6rem;
    overflow: hidden;
  }
}