bar {
  display: block;
  padding-block: 12px;

    * {
        text-wrap-mode: wrap;
    }
    h2 {margin-block: 0; padding-block: 4px; padding-inline: 10px;}

    p {display: inline;}

}

h2.icon {
  padding: 0 10px 0 0;
  display: flex;
  align-items: center;
  width: min-content;
}

.bg-red {background-color: rgba(196, 22, 25); color: white}
.bg-white {background-color: rgb(255, 255, 255); color: black; * {color: black} ::selection {background-color: orange;}}
.bg-yellow {background-color: rgb(255, 205, 68); color: rgb(2, 5, 52)}
.bg-gray {background-color: rgb(90, 103, 135); color: white;}
.bg-blue {background-color: rgb(88, 101, 242); color: white; *{color: white}}

summary::marker, summary::-webkit-details-marker {
    display: none;
    content: "";
}

details {
  margin-block: 10px -10px;
  margin-inline: auto;
  max-width: 100vw;
  transform: scale(.7);
  
  .dropdown-icon {rotate: 90deg; transition: all 0.2s var(--bouncy-cubic-bezier)}

  :hover {
    transform:perspective();
  }

  &[open] {
    transform: none;
    margin-block: 20px 0;
    .dropdown-icon {rotate: -90deg} 
  bar {padding-inline: min(30vw, 40px);}}
}

details > summary:hover {
  cursor: pointer;
}

details > summary:hover { .dropdown-icon {
  transform:scale(1.2) translate(4%);
}}

details[open] > summary::after {
  content: "";
  display: block;
  height: 0;
  padding: 0;
  margin: auto;
  border-bottom: 2px dotted gray;
}

details bar.info {
  padding-block: 8px 16px;
}