:root {
  --sdc-icon-list-element-padding: 20px;
  --sdc-icon-list-element-padding-inline: 20px;
  --sdc-icon-list-element-border-width: 1px;
  --sdc-icon-list-element-border-color: #000;
  --sdc-icon-list-element-border-radius: 2px;
  --sdc-icon-list-element-icon-size: 90px;
  --sdc-icon-list-element-icon-background-color: #fff;
  --sdc-icon-list-element-heading-size: 24px;
  --sdc-icon-list-element-heading-line-height: 32px;
  --sdc-icon-list-element-heading-weight: 500;
  --sdc-icon-list-element-text-size: 20px;
  --sdc-icon-list-element-line-height: 24px;
  --sdc-icon-list-element-gap: 32px;
}

.sdc-icon-list-element {
  display: grid;
  grid-template-columns: var(--sdc-icon-list-element-icon-size) auto;
  padding: var(--sdc-icon-list-element-padding) var(--sdc-icon-list-element-padding-inline) ;
  grid-gap: var(--sdc-icon-list-element-gap);
  border: var(--sdc-icon-list-element-border-width) solid var(--sdc-icon-list-element-border-color);
  border-color: var(--sdc-icon-list-element-border-color);
  border-radius: var(--sdc-icon-list-element-border-radius);
}

.sdc-icon-list-element-icon {
  width: var(--sdc-icon-list-element-icon-size);
  height: var(--sdc-icon-list-element-icon-size);
  background-color: var(--sdc-icon-list-element-icon-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.sdc-icon-list-element-content {
  font-size: var(--sdc-icon-list-element-text-size);
  line-height: var(--sdc-icon-list-element-line-height);
}

.sdc-icon-list-element-content h3 {
  margin-top: 0;
  margin-bottom: var(--spacing-8);
  font-weight: var(--sdc-icon-list-element-heading-weight);
  line-height: var(--sdc-icon-list-element-heading-line-height);
  font-size: var(--sdc-icon-list-element-heading-size);
}

.sdc-icon-list-element-content p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.sdc-icon-list-element-content p:last-child {
  margin-block-end: 0;
}