@use '@angular/material' as mat;
@import "../../lib/scss/sc-mixins";
@import "../../lib/scss/sc-variables";

:host {
  position: relative;
}

.gallery {
  display: grid;
  gap: $grid-gap;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: minmax(0, 1fr);

  @include media-breakpoint-up(lg) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  &:has(.img-preview__container + .img-preview__container) {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.sc-dropzone {
  cursor: pointer;
  border: 2px dotted;
  border-radius: $dropzone-border-radius;
  padding: $dropzone-padding;
  text-align: center;
}