/* See ./icon-and-text.md for design notes and rationale. */

.icon-and-text__title {
  margin: 0 0 var(--ll-space-9);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h6-family);
  font-size: var(--ll-text-h6-size);
  line-height: var(--ll-text-h6-line-height);
  letter-spacing: var(--ll-text-h6-letter-spacing);
  font-weight: var(--ll-text-h6-weight);
}

.icon-and-text__list {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-8);
}

.icon-and-text-item {
  display: flex;
  align-items: center;
  gap: var(--ll-space-7);
}

.icon-and-text-item__icon {
  flex: none;
  width: 86px;
  height: 86px;
}

.icon-and-text-item__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-and-text-item__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
}

.icon-and-text-item__heading {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-lg-family);
  font-size: var(--ll-text-body-lg-size);
  line-height: var(--ll-text-body-lg-line-height);
  letter-spacing: var(--ll-text-body-lg-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
}

.icon-and-text-item__text {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

@media (width >= 768px) {
  .icon-and-text-item__icon {
    width: 136px;
    height: 136px;
  }
}