main {
  width: 100%;
  height: auto;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content:center;}

    @supports (display: grid) {
  main {
    max-width: none;
    margin: 0; }
  article {
    margin: 0; }
  main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem; } }

.cont-div{
  background-color: transparent;
  cursor: pointer;
  padding: 0.8rem;
  width: 100%;
  border: solid;
  border-color: #1a1a1a;
  border-width: 0.2em;
  border-radius: 1rem;
  text-align: left;
  outline: none;
  font-size: 1.1rem;
  font-weight: 600;
}

.conv{
  font-weight: 700;
}

.conv .collapsible {
border: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 .act, .collapsible:hover {
  background-color: transparent;
  color: #7B8CDE;
  text-decoration: none;
}

.conv .content{
   padding: 0 0.8rem; 
}