<!--* first accordion example -->
<section class="accordion-examples">
  <h2 class="accordion-examples__heading">Accordion 1</h2>

  <div class="accordion1-wrapper">
    <!-- first accordion -->
    <details class="accordion1-card">
      <summary class="accordion1-card__header">Header 1</summary>
      <p class="accordion1-card__body">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
        neque, velit quasi quos quia nulla omnis! Similique dolorum,
        veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
        atque vitae quia accusamus.
      </p>
    </details>

    <!-- second accordion -->
    <details class="accordion1-card">
      <summary class="accordion1-card__header">Header 2</summary>
      <p class="accordion1-card__body">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
        neque, velit quasi quos quia nulla omnis! Similique dolorum,
        veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
        atque vitae quia accusamus.
      </p>
    </details>

    <!-- third accordion -->
    <details class="accordion1-card">
      <summary class="accordion1-card__header">Header 3</summary>
      <p class="accordion1-card__body">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et
        neque, velit quasi quos quia nulla omnis! Similique dolorum,
        veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
        atque vitae quia accusamus.
      </p>
    </details>
  </div>
</section>

/* ! project styles */
.accordion-examples__heading {
  text-align: center;
}
/* accordion wrapper */
.accordion1-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* accordion card */
.accordion1-card {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

/* accordion title */
.accordion1-card__header {
  font-weight: bold;
  color: #202020;
  position: relative;
  padding: 10px;
  margin-bottom: 0;
}

/* accordion body */
.accordion1-card__body {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
}