.gadget-container{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:flex-start;
}
.gadget-container.three-cols .gadget-box{
  flex: 0 0 calc((90% - 20px) / 3);
}

.gadget-container.two-cols .gadget-box{
  flex: 0 0 calc((80% - 10px) / 2);
}
/* box dispari */
.gadget-container.two-cols.odd::after{
  content: "";
  flex: 0 0 calc((80% - 10px) / 2);
}

.gadget-container.one-col .gadget-box{
  flex: 0 0 60%;
}
.gadget-box{
  display:flex;
  flex-direction:column;
  margin-left: 0px;
  margin-bottom: 8px;
  box-sizing:border-box;
  border:1px solid #d6b786;
  padding:8px;
  justify-self: baseline;
}
.gadget{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
.gadget-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  font-weight: bold;
}
 /* codice gadget */
 .gadget-actions{
  margin-top:4px;
  margin-bottom:6px;
}
.show-code,
.copy-code{
  cursor:pointer;
  margin-top:4px;
  user-select:none;
  color: #737c1c;
}
.show-code:hover,
.copy-code:hover{
  text-decoration:underline;
}
.code-area{
  display:none;
  margin-top:10px;
}
.code-area.open{
  display:block;
}
pre{
  background:#f5f5f5;
  padding:12px;
  border:1px solid #ddd;
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  text-align: left;
}
.copy-btn{
  margin-top:4px;
  padding:6px 10px;
  cursor:pointer;
}