html, body {
  height: 100%;
  margin: 0;
}

.read-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns children of the container at the start of the vertical axis */
  min-height: calc(100vh - 300px); /* Use viewport height to ensure it covers the full height of the screen */
  max-width: 700px;
  margin-top: 3rem; /* mt-3 is equivalent to margin-top: 1rem * 3 in Bootstrap, adjust this value as necessary */
  margin-left: auto; /* Centers the container */
  margin-right: auto; /* Centers the container */
}

.read-container {
  
  margin: 0 auto; /* centering the container */
  padding-left: 20px; /* padding on the left */
  padding-right: 20px; /* padding on the right */
}

/* Increases the line height for better readbility */
.read-container p {
  line-height: 1.6;
  text-align: justify;
}

/* Code for grid, mansory layout is as follows */

.masonry {
  columns: 4;
  column-gap: 16px;
  margin: 12px;
}

@media (max-width: 1200px) {
  .masonry {
    columns: 3;
  }
}

@media (max-width: 992px) {
  .masonry {
    columns: 2;
  }
}

.masonry .grid {
  display: inline-block;
  margin-bottom: 16px;
  position: relative;
  opacity: 1;
  /* add this */
  transform: scale(1);
  /* add this */
  transition: all 0.3s ease-in-out, opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.masonry .grid:before {
  border-radius: 5px;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.masonry .grid img {
  width: 100%;
  border-radius: 5px;
}

.masonry .grid__title {
  font-size: 28px;
  font-weight: bold;
  margin: 0px 0px 10px 0px;
}

.masonry .grid__author {
  font-size: 14px;
  font-weight: 300;
}

.masonry .grid__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.masonry .grid__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.masonry .grid__tag {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 1px 1px 1px 3px;
  margin-bottom: 5px;
  font-size: 8px;
  font-weight: bold;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}


/* Title Size adjustment
used in "gird_tag" font adjustment for various screen sizes */
@media (min-width: 1601px) {
  .masonry .grid__tag {
    font-size: 22px;
  }
			.hero-img {object-fit: cover; 
		height: 500px; 
		object-position: center;
	}
}


@media (min-width: 1201px) and (max-width: 1600px) {
  .masonry .grid__tag {
    font-size: 20px;
  }
			.hero-img {object-fit: cover; 
		height: 500px; 
		object-position: center;
	}
}

@media (min-width: 993px) and (max-width: 1400px) {
  .masonry .grid__tag {
    font-size: 18px;
  }
			.hero-img {object-fit: cover; 
		height: 500px; 
		object-position: center;
	}
}

@media (min-width: 801px) and (max-width: 992px) {
  .masonry .grid__tag {
    font-size: 20px;
  }
		.hero-img {object-fit: cover; 
		height: 500px; 
		object-position: center;
	}
	
}

@media (min-width: 601px) and (max-width: 800px) {
  .masonry .grid__tag {
    font-size: 18px;
  }
		.hero-img {object-fit: cover; 
		height: 400px; 
		object-position: center;
	}
}

@media (min-width: 501px) and (max-width: 600px) {
  .masonry .grid__tag {
    font-size: 16px;
  }
	.hero-img {object-fit: cover; 
		height: 400px; 
		object-position: center;
	}
}

@media (min-width: 401px) and (max-width: 500px) {
  .masonry .grid__tag {
    font-size: 12px;
  }
		.hero-img {object-fit: cover; 
		height:365px; 
		object-position: center;
	}
}

@media (min-width: 326px) and (max-width: 400px) {
  .masonry .grid__tag {
    font-size: 11px;
  }
			.hero-img {object-fit: cover; 
		height: 300px; 
		object-position: center;
	}
}


@media (min-width: 251px) and (max-width: 325px) {
  .masonry .grid__tag {
    font-size: 10px;
  }
		.hero-img {object-fit: cover; 
		height: 300px; 
		object-position: center;
	}
}

.mt-auto {
  margin-top: auto;
}


/* <!-- Styling for the icons --> */
.social-icon {
  height: 24px;
  width: 24px;
  vertical-align: middle;
}

.content-container {
  border: 1px solid rgb(239, 238, 238);
  border-radius: 0.25rem;
  background-color: white;
  padding: 2rem 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.content-container:hover {
  transform: scale(1.03);
  box-shadow: 4px 4px 14px rgba(0,0,0,0.2);
}

/* Ensures text and icons are centered */
.content-container > * {
  text-align: center;
  margin: 0 auto;
}

/* Additional styling for icons can be added here */
.content-container i {
  font-size: 24px; /* Example size, adjust as needed */
  margin-bottom: 0.5rem;

}

.icon-image {
    width: 100px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin-bottom: 10px; /* Space between image and heading */
}

.text-container {
    max-width: 100%; /* Adjust the width as needed */
/*    white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3em; /* Adjust based on your font-size */
	min-height: 50px;
}

.content-container-link, .content-container-link h5, .content-container-link p {
    color: inherit; /* This makes the text color the same as it would be outside of the a tag */
    text-decoration: none; /* This removes the underline */
}

/* To change the text color on hover to indicate it is clickable */
.content-container-link:hover, .content-container-link:hover h5, .content-container-link:hover p {
    color: inherit; /* Replace with the color you want on hover */
    text-decoration: underline; /* If you want to add an underline on hover */
}