.npl-project-record-shuffle {
  height: auto;
  width: 100%;
  background-color: hsl(39, 38%, 59%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 90px 30px;
  gap: 60px;
  flex-direction: column;
}

.npl-project-record-heading p {
  font-family: "libre baskerville";
  font-size: 2rem;
  font-style: italic;
  font-weight: 300;
  color: white;
}

.npl-project-record-top,
.npl-project-record-bottom {
  display: flex;
  gap: 10px;
  /* flex-wrap: wrap; */
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.npl-project-record-top-one,
.npl-project-record-top-eight {
  width: 150px;
  aspect-ratio: 2/2;
  /* background-color: red; */
}

.npl-project-record-shuffle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.npl-project-record-top-four {
  width: 150px;
  aspect-ratio: 3/2;
  /* height: 100px; */
  /* background-color: red; */
}

.npl-project-record-top-two,
.npl-project-record-top-three,
.npl-project-record-top-five,
.npl-project-record-top-six,
.npl-project-record-top-seven {
  width: 150px;
  aspect-ratio: 2/3;
  /* height: 100px; */
  /* background-color: red; */
}

button {
  outline: none;
  border: none;
  background-color: transparent;
}

.npl-project-record-button {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.npl-project-record-button p {
  font-weight: 850;
  font-family: "Barlow";
  font-size: 2rem;
  color: #716a5e;
}

.npl-project-record-button img {
  height: 30px;
  width: 30px;
  object-fit: cover;
}

.npl-project-record-bottom-one,
.npl-project-record-bottom-two {
  width: 150px;
  aspect-ratio: 2/2;
  /* background-color: red; */
}

.npl-project-record-bottom-six {
  width: 150px;
  aspect-ratio: 3/2;
  /* height: 100px; */
  /* background-color: red; */
}

.npl-project-record-bottom-four,
.npl-project-record-bottom-three,
.npl-project-record-bottom-five,
.npl-project-record-bottom-eight,
.npl-project-record-bottom-seven {
  width: 150px;
  aspect-ratio: 2/3;
  /* height: 100px; */
  /* background-color: red; */
}

.npl-project-record-top div,
.npl-project-record-bottom div {
  opacity: 1;
  transition: 1s ease var(--flip-delay); /* Add delay for the flip */
  transform-style: preserve-3d; /* Required for 3D flip effect */
  transform: rotateY(0deg); /* Default state */
  position: relative;
  perspective: 1000px; /* Create 3D perspective */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.npl-project-record-top div.flip,
.npl-project-record-bottom div.flip {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  transform: rotateY(360deg); /* Flip to show the front image */
}