body {
  font-family: "Work Sans", sans-serif;
  color: #ffffff;
  height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  max-height: auto;
}

/* ############ 4. releases ############ */

.releases {
  padding: 0.1rem;
  margin: auto;
  max-width: 1200px;
}


.releases article {
  margin: 2rem auto;
  width: 80%;
  max-width: 1000px;
}

.releases h1 {
  color: #ffffff;
  font-size: 3rem;
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: center;
}

.releases article p {
  border-left: solid 1px #ffffff;
  padding-left: 1rem;
}


.object {
  display: flex;
  flex-direction: column;
  border: 2px solid #ffffff; /* Change the color as needed */
  border-radius: 8px; /* Adjust the value to make the corners rounded */
  margin: 10px; /* Increase the value to make the border a little bit further out */
  padding: 40px; /* Add padding to create a gap between the text and the border */  flex-wrap: nowrap;
}

 .img {
}

.information {
  padding: 1rem;
  overflow: hidden;
  max-height: 18.5rem;
  transition: max-height 1.0s;

}

.expandBtn {
  border-radius: 3px;
  align-self: self-end;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  margin-top: 1rem; /* Add a gap of 1rem above the element */
  cursor: pointer; /* Add cursor pointer to indicate it is clickable */
  text-decoration: underline; /* Add underline */
}

.information.expanded {
  max-height: 50rem; /* set a large enough value to accommodate expanded content */
}


.expandBtn.clicked + .information {
  max-height: none;
}

.downloadBtn {
  border-radius: 3px;
  align-self: self-end;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  margin-top: 1rem; /* Add a gap of 1rem above the element */
  cursor: pointer; /* Add cursor pointer to indicate it is clickable */
}



/* Media Queries */
@media screen and (min-width: 700px) {

 
  /* ######### 10a-iii. releases, Large screen rules ######### */
  .releaseList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2,2);
      }

  .releases article {
   width: 90%;
   display: flex;
   align-items: center;
  }


}