<details class="collapse">
  <summary class="title">Lorem.</summary>
  <div class="description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus odio natus numquam provident aliquam vel iste quasi repellendus nisi vero delectus laboriosam, atque asperiores sint error repellat dolores unde.</div>
</details>
<details class="collapse">
  <summary class="title">Earum, cum.</summary>
  <div class="description">Aperiam iure corporis doloremque hic aut fugiat tempora minus alias ducimus optio saepe perspiciatis provident, ab exercitationem quos laborum at adipisci voluptatum, laboriosam ut cupiditate recusandae placeat unde. Esse, maiores.</div>
</details>
<details class="collapse">
  <summary class="title">Libero, molestiae officiis.</summary>
  <div class="description">Ex, magnam pariatur accusamus rerum nihil quidem et ipsam delectus illum vitae. Dicta reprehenderit harum ut ex eligendi optio obcaecati? Libero neque corporis, sapiente ullam impedit rem ipsam. Dolores, rem?</div>
</details>
<details class="collapse">
  <summary class="title">Deleniti quidem officia iure.</summary>
  <div class="description">Quos repellendus unde, vel voluptate est, voluptates rem, vero incidunt animi dolore atque! Asperiores dolorem id praesentium molestias magnam est nobis nihil, consectetur tempora consequuntur perspiciatis consequatur earum facere numquam.</div>
</details>
<details class="collapse">
  <summary class="title">Quod consectetur officiis eaque illo?</summary>
  <div class="description">Tempora ipsam explicabo dignissimos harum, aut ducimus nihil soluta libero veritatis numquam molestiae tenetur, quasi beatae ea similique ullam, neque vitae labore nobis recusandae exercitationem error in? Quod, fugit nihil?</div>
</details>

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space: 24px; 
  --space-md: 32px;
  --space-lg: 48px;
  --space-xlg: 64px;

  --screen-sm: 768px;

  --gray: #555;
  --gray-dark: #333;
  --gray-darker: #111;
  --gray-light: #f1f1f1;
  --gray-lighter: #fafafa;
  --blue: #187888;
  --yellow: #e6af05;
  --white: #fff;
  --black: #000;

  --brand-primary: var(--blue);
  --background: var(--white);
  --text-color: var(--gray-darker);
}

body {
  background-color: var(--background);
  color: var(--text-color);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
}

details {
  summary {
    list-style: none;
  }
}

.collapse {
  border: solid 1px var(--gray-lighter);
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  transition: background-color 0.25s;
  will-change: background-color;

  &:first-child {
    margin-top: var(--space);
  }

  &:not(:last-child) {
    margin-bottom: var(--space-sm);
  }

  &:hover {
    background-color: var(--gray-lighter);

    .title:after {
      content: "🙂";
    }
  }

  &[open] {
    .title:after {
      content: "😍";
    }
  }
}

.title {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-sm);
  position: relative;

  &:after {
    content: "😴";
    position: absolute;
    right: var(--space-sm);
    transform: translatey(-50%);
    top: 50%;
  }
}

.description {
  border-top: var(--gray-light) solid 1px;
  font-size: 14px;
  line-height: 21px;
  padding: var(--space-sm);
}