<main>
  <div>
  <details class="accordion">
    <summary class="accordion__title">
      Accordion title
    </summary>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.</p>
    </div>
  </details>
  <details class="accordion">
    <summary class="accordion__title">
      Accordion title
    </summary>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.</p>
    </div>
  </details>
  <details class="accordion">
    <summary class="accordion__title">
      Accordion title
    </summary>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis dolor.</p>
    </div>
  </details>
</div>
  <a href=="" target="_blank">Read the related article</a>
</main>  

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: Arial;
}

body {
  margin: 0;
  padding: 2rem;
  color: #333333;
  background-color: #0093e9;
  background-image: linear-gradient(-30deg, #0093e9 0%, #80d0c7 100%);
  min-height: 100vh;
}

main {
  padding: 1.25rem;
  background-color: rgba(256,256,256,1);
  
  a {
    text-align: center;
    display: block;
    margin-top: 2em;
    color: #333;
    &:hover {
      color: #666;
    }
  }
}

// commented lines will add height transition, at the cost of some unwanted limitation (height, ellipsis)
details.accordion {
  border: solid 2px #f5f5f5;
  transition: all 0.3s ease-in-out;
  // max-height: 4em;
  // overflow: hidden;  
  & + & {
    margin-top: 0.25rem;
  }  
  &:hover {
    background-color: #f5f5f5;
  }

  summary.accordion__title {
    list-style-type: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: #555555;
    padding: 0.875rem 2.5rem 0.875rem 0.875rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M23.024 11.263l-7.024 7.023-7.022-7.023-3.091 3.090 8.569 8.569c0.413 0.413 0.961 0.64 1.545 0.64s1.133-0.228 1.545-0.64l8.569-8.569-3.091-3.090z' fill='%23555555'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem top 0.625rem;
    background-size: 1.5rem;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }
  }

  .accordion__content {
    padding: 0 1rem 1rem 1rem;
    p {
      margin: 0;      
    }
    p + p {
      margin-top: 0.5em;
    }
  }

  &[open] {
    background-color: #ebebeb;
    border-color: #ebebeb;
    // max-height: 50em;
    
    summary.accordion__title {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.976 22.025l7.024-7.023 7.022 7.023 3.091-3.090-8.568-8.568c-0.413-0.412-0.961-0.64-1.545-0.64s-1.133 0.228-1.545 0.64l-8.569 8.569 3.091 3.090z' fill='%23555555'/%3e%3c/svg%3e");
    }
  }
}