.project {
    aspect-ratio: var(--frame-aspect-ratio);
    border-radius: var(--frame-border-radius);
    height: var(--frame-height);
    overflow: hidden;
    flex: none;
}

.cursor-provider {
    cursor: none;
}
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
}
.cursor__layout {
    display: grid;
    grid-template: auto auto / auto auto;
}

.cursor__media {
    display: grid;
    grid-column: 1;
    grid-row: 1;
}
.cursor__media img {
    grid-row-start: 1;
    grid-column-start: 1;
}

.cursor__text {
    grid-column: 2;
    grid-row: 2;
    position: relative;
}

.slider {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider--is-projects {
    height: var(--frame-height);
}

.slider__track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    /* touch-action: pan-y; */
}

.slider__item {
    position: absolute;
    flex: 1 0;
    top: 0;
    bottom: 0;
}

.slider__controls {
    flex: none;
    margin-top: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.slider__button {
    /* Placeholder for @include flex-center */
    --dimension: 2.5rem;
    width: var(--dimension);
    height: var(--dimension);
    border-radius: 50%;
    background-color: var(--primary-A05);
    /* Placeholder for @include isLaptopOrDesktop */
    /* &:hover {
    background-color: var(--primary-A08);
  } */
    cursor: var(--clickable-cursor);
}

.slider--tweet .slider__item {
    width: clamp(18rem, 28vw, 30rem);
    height: auto;
    min-width: 288px;
    flex: none;
    /* Placeholder for @media (max-width: $bottom-nav-breakpoint) */
    /* max-width: 70vw; */
    /* Placeholder for @media (max-width: $mobile-landscape) */
    /* max-width: 75vw; */
}

.slider--stack {
    position: absolute;
    inset: 2rem 0 2.5rem;
}

.slider--logo {
    cursor: ew-resize;
}

.slider--work {
    z-index: 2;
}

.slider--work .slider__item {
    top: 0;
    bottom: 0;
}
/* 
// @use "../../app/base" as *;

// .slider {
//   width: 100%;
//   flex: 1;
//   display: flex;
//   flex-direction: column;
//   align-items: center;

//   &__track {
//     width: 100%;
//     height: 100%;
//     display: flex;
//     align-items: center;
//     gap: 0.5rem;
//     position: relative;
//     touch-action: pan-y;
//     // overflow: hidden;
//   }

//   &__item {
//     position: absolute;
//     flex: 1 0;
//   }

//   &__controls {
//     flex: none;
//     margin-top: 2rem;
//     position: relative;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     gap: 1rem;
//     // @media (max-width: $bottom-nav-breakpoint) {
//     //   display: none;
//     // }
//   }

//   &__button {
//     @include flex-center;
//     --dimension: 2.5rem;
//     width: var(--dimension);
//     height: var(--dimension);
//     border-radius: 50%;
//     background-color: var(--primary-A05);
//     @include isLaptopOrDesktop {
//       &:hover {
//         background-color: var(--primary-A08);
//       }
//     }
//     cursor: var(--clickable-cursor);
//   }

//   &--tweet {
//     .slider__item {
//       width: clamp(18rem, 28vw, 30rem);
//       height: auto;
//       min-width: 288px;
//       flex: none;

//       @media (max-width: $bottom-nav-breakpoint) {
//         max-width: 70vw;
//       }
//       @media (max-width: $mobile-landscape) {
//         max-width: 75vw;
//       }
//     }
//   }

//   &--stack {
//     position: absolute;
//     inset: 2rem 0 2.5rem;
//   }

//   &--logo {
//     cursor: ew-resize;
//   }

//   &--work {
//     z-index: 2;
//     .slider__item {
//       top: 0;
//       bottom: 0;
//     }
//   }
// } */

.project--is-row-item {
  display: block;
  height: var(--frame-height);
  width: var(--frame-width);
  aspect-ratio: var(--frame-aspect-ratio);
  border-radius: var(--frame-border-radius);
}

.project--is-grid-item {
  /* display: block;
    aspect-ratio: var(--frame-aspect-ratio);
    border-radius: var(--frame-border-radius); */
  flex: none;
}

.project--is-grid-item__video {
  display: block;
  aspect-ratio: var(--frame-aspect-ratio);
  border-radius: var(--frame-border-radius);
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  flex: none;
}

.projects__grid {
  /* display: grid;
    /* grid-template-rows: min-content auto; */
  /* grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    grid-auto-flow: row;
    gap: 2.5rem;
    max-width: 100%; */
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(var(--frame-width) / 2), 1fr)
  );
  gap: 2.5rem;
}

/* On tablet, just make it two columns, no matter the width */

@media (max-width: 768px) {

.projects__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem
}
  }