SASS to give a responsive photo gallery the slight rotation of pictures spilled across a table effect

_photo-box.scss

$photoRotation: 4deg; // Allows setting the alternating photo rotation
$breakpoints: (
  1200: 4,
  // 4 columns for screens wider than 1200px
  800: 3,
  // 3 columns for screens wider than 800px
  600: 2,
  // 2 columns for screens wider than 600px
  400: 1 // 1 column for screens wider than 400px,
);

.photo-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.photo-box a {
  display: inline-block;
  position: relative;
  margin: 5px;
  flex-basis: calc(25% - 10px); // 25% for 4 images in a row, minus margin
  max-width: 25%; // Ensures no more than 4 images per row
  text-align: center;
  z-index: 1; // Low z-index for non-hovered items
  transform: rotate(-$photoRotation); // Default rotation

  &:nth-child(even) {
    transform: rotate(-$photoRotation); // Subtle left rotation for even items
  }
  &:nth-child(odd) {
    transform: rotate($photoRotation); // Subtle right rotation for odd items
  }
  img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease-out;
    box-shadow: 1.5px 2px 5px #0008;
  }

  &:hover {
    z-index: 999; // High z-index and zoom for hovered items to mimic them being picked up

    img {
      transform: scale(2);
      box-shadow: 3px 4px 10px #0006;
    }
  }
}

// Use the breakpoints map to calculate the correct flex-basis and max-width for each breakpoint
@each $breakpoint, $columns in $breakpoints {
  @media (max-width: #{$breakpoint}px) {
    .photo-box a {
      flex-basis: calc(100% /#{$columns} - 10px);
      max-width: calc(100% /#{$columns});
    }
  }
}