/* Create a separate CSS file for this style */
.chatdiv-main {
  display: flex;
  flex-direction: row; /* Make the div a single row */
  justify-content: center;
}

.chatdiv-image {
  width: 33%;
  padding: 10px;
  position: relative;
}

.chatdiv-image-img-noborder {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 5/4; /* Crop the image to 5:4 ratio */
    border-radius: 15px; /* Make the image corners round */
  }

.chatdiv-image-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 5/4; /* Crop the image to 5:4 ratio */
  border-radius: 15px; /* Make the image corners round */
  border: 5px solid #008000;
}

.chatdiv-image-img-no {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 5/4; /* Crop the image to 5:4 ratio */
  border-radius: 15px; /* Make the image corners round */
  border: 5px solid #B22222;
}

.chatdiv-overlay-image {
  position: absolute;
  top: 15%;
  left: 15%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: auto;
  z-index: 1;
}



.chatdiv-text {
  text-align: center;
}

@media screen and (max-width: 600px) { /* Use media queries to make the div responsive */
  .chatdiv-main {
    /*flex-direction: column;*/ /* Stack the images vertically on small screens */
    flex-direction: row; /* Stack the images horisontally on small screens */

  }
  
  .chatdiv-image {
    width: 80%; /* Adjust the image width on small screens */
  }
}