.usp__container {
  container: usp / inline-size;

  .usp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;

    .usp__card {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 1fr 12px 16px;
      align-items: center;
      gap: 0.8rem 0.2rem;

      .usp__img {
        grid-row: 1;
        grid-column: 1;
      }

      .usp__title {
        grid-row: 1;
        grid-column: 1 / -1;
        margin-left: 2rem;
      }

      .usp__step {
        grid-row: 2;
        padding-block: 6px;

        &:nth-of-type(1) {
          filter: opacity(0.1);
        }

        &:nth-of-type(2) {
          filter: opacity(0.3);
        }

        &:nth-of-type(3) {
          filter: opacity(0.5);
        }

        &:nth-of-type(4) {
          filter: opacity(0.7);
        }

        &:nth-of-type(5) {
          filter: opacity(0.9);
        }

        &.selected {
          filter: brightness(0.8);
          border-radius: 2.5rem;
        }
      }

      .usp__label {
        grid-row: 3;
        align-self: baseline;

        &:first-of-type {
          justify-self: self-start;
        }

        &:last-of-type {
          justify-self: self-end;
        }

        &:nth-of-type(2) {
          grid-column: span 3;
          justify-self: center;
        }
      }

      p {
        margin: unset;
      }
    }

    .usp__title {
      font-size: 14px;
    }

    .usp__label {
      color: #424242;
      font-size: 12px;
      font-weight: 500;
      text-wrap: nowrap;
    }

    @container (width <= 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @container (width <= 500px) {
      grid-template-columns: 1fr;
    }
  }
}