/* styles.css */
<style>
/* Default table layout for larger screens */
table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}
tr {
  border: none;
}

img {
  height: 100
}

.td_text {
  width: 70%;
  border: none;
  vertical-align: middle;
  padding: 10px;
}
.td_image {
  width: 30%;
  border: none;
  padding: 0;
}

.custom-text {
  font-size: 18px;
  text-indent: 30px;
  text-align: justify;
  padding-right: 10px;
}

.image-container {
  position: relative; /* Required for absolute positioning of ::before */
  display: inline-block; /* Ensure it wraps the image */
  text-align: center; /* Center the image horizontally */
  margin: 0;
  padding: 0;
  line-height: 0;
}

.image-container img {
  display: block; /* Remove any extra space below the image */
  margin: 0 auto; /* Center the image horizontally */
  height: auto;
}

.image-container::before {
  content: ''; /* Required for the pseudo-element to render */
  position: absolute;
  top: 0; /* Start from the top edge */
  bottom: 0; /* Stretch to the bottom edge */
  left: 0; /* Position on the left side */
  width: 3%; /* Width of the gradient */
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* White to transparent gradient */
  pointer-events: none; /* Ensure it doesn't interfere with interactions */
}

/* Responsive layout for screens narrower than 800px */
@media (max-width: 800px) {
  tr {
    display: flex; /* Convert the row to a flex container */
    flex-direction: column; /* Stack the cells vertically */
  }

img {
  height: 70
}
.td_text {
  order: 1;
  width: 100%;
  horisontal-align: middle;
  padding: 10px;
}
.td_image {
  order: 0;
  width: 100%;
  display: flex; /* Center the image horizontally */
    justify-content: center; /* Center alignment */
    margin-bottom: 20px; /* Add spacing between image and text */
}
.image-container img {
  height: 220pt;
}
.image-container::before {
    /* Reposition the gradient to the left side of the image */
    content: ''; /* Required for the pseudo-element to render */
    position: absolute;
    top: auto;
    right: 0; /* Start from the top edge */
    bottom: 0; /* Stretch to the bottom edge */
    left: 0; /* Position on the left side */
    width: auto; /* Width of the gradient */
    height: 3%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); *//* White to transparent gradient */
    pointer-events: none; /* Ensure it doesn't interfere with interactions */
  }
}
</style>