.iccinfochiave {
  position: relative;
  margin-block: var(--icc-spacing-6);
  padding: var(--icc-spacing-6);
  padding-block-start: var(--icc-spacing-8);

  background-color: var(--icc-primary-200);

  border: 1px solid var(--icc-primary-500);
  border-radius: var(--icc-spacing-3);
}

.iccinfochiave .titolo {
  display: flex;
  align-items: center;
  gap: var(--icc-spacing-2);
  background-color: var(--icc-primary-500);
  padding: var(--icc-spacing-1) var(--icc-spacing-3);
  border-radius: 50rem;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.iccinfochiave .titolo h4 {
  font-size: var(--icc-text-md);
  font-weight: var(--icc-font-regular);
  line-height: var(--icc-leading-6);
  margin: 0;
}

.iccinfochiave .footer {
  color: var(--icc-gray-800);
  line-height: var(--icc-leading-6);
  font-weight: var(--icc-font-bold);
  font-family: var(--icc-font-sans);
  text-align: center;
}
.iccinfochiave .footer span {
  cursor: pointer;
}

.iccinfochiave[data-expande="false"] .contenuto {
  max-height: 128px;
  overflow: hidden;
  mask: linear-gradient(white, transparent);
}
.iccinfochiave[data-expande="true"] .footer {
  display: none;
}

.iccinfochiave .contenuto {
  counter-reset: counter;
}

.iccinfochiave .contenuto :is(h1, h2, h3, h4, h5, h6) {
  counter-increment: counter;

  position: relative;

  color: var(--icc-tertiary-950);
  font-family: var(--icc-font-sans) !important;
  font-size: var(--icc-text-xl);
  font-weight: var(--icc-font-bold);
  line-height: var(--icc-leading-7);
  margin-block-end: var(--icc-spacing-3);
}
.iccinfochiave .contenuto p {
  color: var(--icc-gray-800);
  font-size: var(--icc-text-md);
}
.iccinfochiave .contenuto p:not(:last-child) {
  margin-block-end: var(--icc-spacing-6);
}
.iccinfochiave .contenuto p a {
  color: var(--icc-gray-800);
  text-decoration: underline;
  font-weight: var(--icc-font-bold);
}
.iccinfochiave .contenuto :is(h1, h2, h3, h4, h5, h6, p) {
  margin-inline-start: var(--icc-spacing-8);
}

.iccinfochiave .contenuto :is(h1, h2, h3, h4, h5, h6):before {
  content: "#" counter(counter);

  position: absolute;
  left: -3rem;

  background-color: var(--icc-primary-500);
  padding: var(--icc-spacing-1) var(--icc-spacing-2);
  border-radius: var(--icc-spacing-3);

  color: var(--icc-tertiary-950);
  font-size: var(--icc-text-sm);
  font-weight: var(--icc-font-bold);
  line-height: var(--icc-leading-5);
}