* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: "Yrsa", serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-size: 18px;
}

main {
  padding: 40px;
  font-family: "Yrsa", serif;
  min-height: 100dvh;
  background-color: #e4e72c;
}

p {
  margin-bottom: 2em;
}

dl {
  background-color: #eee;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #313131;
  -webkit-box-shadow: -13px 9px 8px rgba(0, 0, 0, 0.3);
          box-shadow: -13px 9px 8px rgba(0, 0, 0, 0.3);
}
dl dt button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1.25rem;
  font-family: "Yrsa", serif;
  font-size: 1.75em;
  font-weight: 800;
  cursor: pointer;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
dl dt button.active {
  background: #ac4b06;
  color: #eee;
}
dl dd {
  border-left: 1px solid #313131;
  border-right: 1px solid #313131;
  overflow: hidden;
}
dl dd .inside {
  padding: 20px;
}
dl dd img {
  max-width: 100%;
  display: block;
  margin-bottom: 1rem;
}
dl[example-number="1"] dd {
  height: 0;
}
dl[example-number="1"] dd.visible {
  height: auto;
}
dl[example-number="2"] dd {
  height: 0;
  -webkit-transition: height 2s ease-out;
  transition: height 2s ease-out;
}
dl[example-number="2"] dd.visible {
  height: 200px;
}
dl[example-number="3"] dd {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  overflow: hidden;
  -webkit-transition: grid-template-rows 2s ease-out;
  transition: grid-template-rows 2s ease-out;
  transition: grid-template-rows 2s ease-out, -ms-grid-rows 2s ease-out;
}
dl[example-number="3"] dd .inside {
  min-height: 0;
  visibility: hidden;
  padding: 0 20px;
}
dl[example-number="3"] dd.visible {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
}
dl[example-number="3"] dd.visible .inside {
  visibility: visible;
  padding: 20px 20px 0 20px;
}
dl[example-number="4"] dd {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 2s ease-out;
  transition: height 2s ease-out;
}
dl[example-number="4"] dd.visible {
  height: calc-size(auto, size);
}
dl[example-number="4"] dd .inside {
  padding-bottom: 0;
}