/**
  * USP
 */

.block-usp {
  text-align: center;
  position: relative;
  padding-top: calc(var(--spacing) * 3);

  .label {
    order: -1;
  }

  h2 {
    margin-bottom: 72px;
  }
}

.component-usp {
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1.5);

  .usp-item {
    flex: 1 1 0;
    min-width: 100%;

    @media (min-width: 380px) {
      min-width: 340px;
    }
  }

  .usp-icon {
    background: url('../../images/usp-bg.svg') no-repeat center center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 120px;
    margin-bottom: 0;
    order: -1;

    &.svg-icon img {
      width: 65px;
      height: auto;
    }
  }

  .usp-content {
    display: grid;
    justify-items: center;
    gap: calc(var(--spacing) * 2.25);

    /* Align text to the left when using an unordered list */
    &:has(ul) {
      text-align: left;
    }
  }

  .heading {
    margin-bottom: 0;
  }

  h3 {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
    line-height: 1.6;
    margin-bottom: 0;
  }

  .label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }
}