/* work.css */

/* On larger screens, keep the card vertical as usual. */
.work-card .card-img-top {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.work-card .card-body {
  display: flex;
  flex-direction: column;
}

/* 
  ON SMALL SCREENS: 
    - Turn the card into a horizontal layout
    - The image floats left
    - The text portion goes right
*/
@media (max-width: 576px) {
  .work-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto; /* So the card can adjust its height automatically */
  }

  .work-card .card-img-top {
    width: 40%; /* Give image portion ~40% of the row */
    height: auto;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.25rem;
    object-fit: cover;
  }

  .work-card .card-body {
    width: 60%; /* Text portion ~60% */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* NEW: Styles for the "Back to Works" link container and link */
.back-to-works-container {
  margin-bottom: 20px;
}

.back-to-works-container .btn.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Space between the arrow icon and the text */
}
