i {
  padding: 5px
}

small {
  text-align: center;
  margin: 10px
}

span {
  text-align: center
}
/* CSS for small screens (up to 767px) */
@media (max-width: 767px) {
  .row {
      display: flex;
      flex-direction: column-reverse; /* Reverses the column order for smaller screens */
  }

  .col-lg-8,
  .col-lg-4 {
      width: 100%; /* Full width for both columns */
  }

  .recipe-image {
    max-width: 70%; /* Set maximum width for the image */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Ensure the image scales properly */
    margin: 0 auto; /* Center the image horizontally */
    display: block; /* Ensure it's a block-level element */
}
}

/* CSS for larger screens (768px and above) */
@media (min-width: 768px) {
  .row {
      display: flex;
  }

  .col-lg-8 {
      flex: 0 0 60%; /* Adjust the width of the recipe content */
  }

  .col-lg-4 {
      flex: 0 0 40%; /* Adjust the width of the image column */
      display: flex;
      justify-content: flex-end; /* Align image to the right */
  }

  .recipe-image {
    max-width: 100%; /* Set maximum width for the image */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Ensure the image scales properly */
}
}

@keyframes slapAnimation {
  0% {
      transform: perspective(600px) rotateX(10deg) rotateY(20deg) rotateZ(30deg) translateZ(600px) translateX(40px) translateY(-50px);
      filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.5)); /* Initial drop shadow */
      opacity: .2;
  }

  85% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(9deg) translateZ(1px) translateX(0) translateY(0);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5)); /* Initial drop shadow */
  }

  100% {
    transform: perspective(600px) rotateX(1deg) rotateY(-1deg) rotateZ(8deg) translateZ(2px) translateX(1px) translateY(1px);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5)); /* Initial drop shadow */
}
}

.recipe-image.clicked {
  animation: slapAnimation .3s ease-in forwards;
}

figcaption {
  padding-left: 40%;
  float: left
}