/*THUMBNAIL*/
.thumbnail-container {
  display: flex;
  align-items: center; /* Align items vertically center */
  justify-content: center; /* Center items horizontally */
  gap: 10px; /* Space between the textbox and the button */
  margin-top: 10px; /* Optional: space above the container */
}

.thumbnail {
    width: 250px;  /* Fixed width for the container */
    height: 325px; /* Fixed height for the container */
    overflow: hidden; /* Hide any part of the image that exceeds the container */
    position: relative; /* Positioning context for absolute positioning inside */
    border: 2px solid #595959; /* Optional: border around the container */
    border-radius: 4px; /* Optional: rounded corners */
    margin: 20px;
  }

.thumbnail:hover{
  border: 4px solid #595959; /* Optional: border around the container */
}
  
.thumbnail-title {
  font-size: 15px; /* Adjust font size as needed */
  color: #595959; /* Title color */
  text-align: center;
  font-weight: bold;
  margin-top:-5px;
}
  
.thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* Ensure the image scales to the container width */
  padding: 30px;
}

.thumbnail-text {
  font-size: 15px; /* Adjust font size as needed */
  color: #595959; /* Title color */
  text-align: center;
  font-weight: bold;
  margin-top: 255px;
}

@media only screen and (max-width: 775px){
  .thumbnail-container {
    flex-direction: column; /* Stack thumbnails vertically */
    align-items: center; /* Center items horizontally in the column */
  }
  .thumbnail{
    width: 250px;  /* Fixed width for the container */
    height: 325px; /* Fixed height for the container */
  }
}