/* CSS is how you can add style to your website, such as colors, fonts, and positioning 
   of your HTML content. To learn how to do something, just try searching 
   Google for questions like "how to change link color." 
*/

/* 
Colors: Red Simple Red Orange Juice Instagram Post
  #fbfae5 crema claro
  #e7c8a4 crema más oscuro
  #98281d rojizo
  #5d3b32 marrón
  #b17168 marrón claro
*/
@import "main.css";
@import "post-it.css";

  .wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    max-width: 1200px;
    width: 100%;
  }

  .photo {
    background: white;
    padding: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
  }

  .photo img {
    width: 100%;
    display: block;
    height: auto;
  }

  /* Different sizes */

  .tall img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  .wide img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  
  /* Random rotations + offsets */

  .photo:nth-child(1) {
    transform: rotate(-4deg) translateY(10px);
  }

  .photo:nth-child(2) {
    transform: rotate(3deg);
  }

  .photo:nth-child(3) {
    transform: rotate(-2deg) translateY(-10px);
  }

  .photo:nth-child(4) {
    transform: rotate(5deg);
  }

  .photo:nth-child(5) {
    transform: rotate(-5deg);
  }

  .photo:nth-child(6) {
    transform: rotate(2deg) translateY(15px);
  }

  .photo:hover {
    transform: scale(1.05) rotate(0deg);
    z-index: 10;
  }
  /*End of Random rotations + offsets*/