/*
    - Name: "gallery.scss"
    - Description: "Add custom styles to gallery component"
*/
.gallery-component {
  --pswp-bg: var(--colorBlack);
  container-name: gallery;
  container-type: inline-size;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  align-self: flex-start;
  gap: var(--spacingSm);
}

@media all and (min-width: 50.0625rem) {
  .gallery-component {
    gap: var(--spacingMd);
  }
}
.gallery-component img {
  max-width: 100%;
  height: auto;
}

.gallery-component.layout-masonry {
  display: block;
}

.gallery-component.layout-masonry .gallery-item {
  box-sizing: border-box;
  width: calc(50% - 8px);
  padding-bottom: var(--spacingSm);
}

@container gallery (min-width: 576px) {
  .gallery-component.layout-masonry .gallery-item {
    width: calc(33% - 9px);
  }
}
@container gallery (min-width: 801px) {
  .gallery-component.layout-masonry .gallery-item {
    width: calc(33% - 8px);
  }
}
@container gallery (min-width: 1248px) {
  .gallery-component.layout-masonry .gallery-item {
    width: calc(33% - 7px);
  }
}
.gallery-component.layout-3_columns .gallery-item {
  width: calc(50% - 12px);
}

@container gallery (min-width: 576px) {
  .gallery-component.layout-3_columns .gallery-item {
    width: calc(33.333% - 16px);
  }
}
@container gallery (max-width: 576px) {
  .gallery-component.layout-4_columns .gallery-item {
    width: calc(50% - 12px);
  }
}
@container gallery (min-width: 576px) {
  .gallery-component.layout-4_columns .gallery-item {
    width: calc(33.333% - 16px);
  }
}
@container gallery (min-width: 843px) {
  .gallery-component.layout-4_columns .gallery-item {
    width: calc(25% - 18px);
  }
}
.pswp-gallery .pswp__preloader {
  margin-right: 0;
  order: -1;
}

.pswp-gallery .pswp__counter {
  margin-right: 1.25rem;
}

.pswp-gallery .pswp__icn {
  width: 32px;
  height: 32px;
  fill: var(--colorWhite);
}

.paragraph--type--gallery.has-show-more .gallery-component.layout-masonry {
  /*&:not(.open) .gallery-item:nth-child(n+7) {
    display: none;
  }*/
}

.paragraph--type--gallery.has-show-more .gallery-component.layout-3_columns:not(.open) .gallery-item:nth-child(n+7) {
  display: none;
}

.paragraph--type--gallery.has-show-more .gallery-component.layout-4_columns:not(.open) .gallery-item:nth-child(n+9) {
  display: none;
}

.paragraph--type--gallery .btn-secondary {
  display: none;
}

.paragraph--type--gallery .btn-secondary-show-more {
  display: flex;
  margin: auto;
  margin-top: var(--spacingLg);
}