.jekyll-linkpreview-wrapper {
  max-width: 100%;
  margin-bottom: 20px;
  overflow: hidden; /* Prevents child elements from overflowing the border */
}

.jekyll-linkpreview-wrapper-inner {
  border: 3px solid rgba(0, 0, 0, 0.176);
  display: flex;
  flex-wrap: wrap;
}

.jekyll-linkpreview-content {
  display: flex;
  width: 100%;
  max-height: 300px; /* Prevent the card from getting taller than 300px */
  overflow: hidden;
}

.jekyll-linkpreview-body {
  flex: 1 1 60%; /* Takes up 60% of the width */
  padding: 12px;
  order: 1; /* Ensures the text appears before the image */
  display: flex;
  flex-direction: column;
}

.jekyll-linkpreview-title {
  font-size: 20px !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
}

.jekyll-linkpreview-description {
  line-height: 1.5;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

.jekyll-linkpreview-footer {
  display: none; /* Hide the footer URL */
}

.jekyll-linkpreview-image {
  flex: 1 1 50%; /* Takes up 40% of the width */
  /* display: flex; */
  justify-content: center;
  align-items: center;
  order: 2; /* Image on the right */
  position: relative;
  overflow: hidden;
  padding: 0 !important; /* Remove any padding */
  margin: 0 !important; /* Remove any margin */
  height: 150px !important; /* Fixed height for the cropped look */
  display: block; /* Prevents flex shrink weirdness */
}

.jekyll-linkpreview-image img {
  width: 100%; /* Fill the container width */
  height: 100%; /* Fill the container height */
  object-fit: cover; /* Crop the image to fit the container */
  border-radius: 0; /* No rounding for cleaner look */
}

/* Mobile view */
@media (max-width: 768px) {
  .jekyll-linkpreview-content {
    flex-wrap: wrap;
  }

  .jekyll-linkpreview-body {
    flex: 1 1 100%; /* Full width for text */
    order: 2; /* Text appears after the image on mobile */
  }

  .jekyll-linkpreview-image {
    flex: 1 1 100%; /* Full width for image on mobile */
    height: 200px; /* Fixed height for the cropped look */
  }

  .jekyll-linkpreview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image crops instead of shrinking */
  }
}