.combined-listing {
  margin-bottom: -1rem;

  .combined-listing__wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1.5rem;

    .swatch {
      display: inline-flex;
      gap: 1.6rem;

      .swatch__item_wrapper {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;

        .swatch__item {
          display: block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid #ccc;

          &.active {
            outline: 3px solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
          }
        }

        .swatch__item_label {
          font-size: 1.2rem;
          text-align: center;
        }
      }
    }
  }
}

@media only screen and (min-width: 750px) {
  .combined-listing {
    .combined-listing__wrapper {
      .swatch {
        .swatch__item_wrapper {
          .swatch__item {
            width: 70px;
            height: 70px;
          }
        }
      }
    }
  }
}