.image-accordion {
  padding-bottom: 8px;
  border-bottom: 1px solid $gray;

  &__preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;

    & img {
      flex-basis: calc((100% - 40px) / 6);
      min-width: 45px;
    }
  }

  &__content {
    margin-bottom: 8px;
  }

  &__header {
    position: relative;
    margin-bottom: 0;
    padding-left: 32px;
    color: $blue;
    cursor: pointer;

    font-size: 0.875rem;
    line-height: 1.375rem;
  }

  &__icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
  }

  &:not(.image-accordion--collapsed) {
    .image-accordion__preview {
      display: none;
    }
  }

  &--collapsed {
    & .image-accordion__header {
      & > .image-accordion__icon {
        & > .fa-angle-up {
          transform: rotate(180deg);
        }
      }
    }
  }
}