Help with my code

Need a bit of coding help here. Download the attached HTML file and the screenshot to understand the following description. On small devices (max-width: 767px) there's no max height i.e. all content in the main info box is visible no matter how much content. On medium devices (min-width: 768px) and (max-width: 991px) the max height of the main info box should be: 431px On large devices (min-width: 992px) the max height of the main info box should be: 574px When the content doesn't fit within max height, A "Read more" Bootstrap accordion/collapse link should appear. Clicking on that would expand the main info box to show all text content AND to show a "Show less" link (that collapses the main info box back to its max-height). When the main info box is collapsed, there should be a slight white gradient over the bottom lines of text before the "Read more" button. See attached screenshot.