/* GPLv3 license
FAS - Callout Masonry
Author: ElsaTam (Kapirklaa in Discord)
*/
body {
  --masonry-column-count: 4;
  --masonry-row-height: 8rem;
  --masonry-gap: 0.5rem;
}

.callout[data-callout=masonry] {
  --callout-padding: 0;
  --callout-content-padding: 0;
  --callout-border-width: 0;
  --callout-blend-mode: normal;
  --image-shadow-offset: 0;
  --link-decoration: none;
  --link-unresolved-opacity: 1;
  --link-unresolved-filter: saturate(30%);
  background: none;
}
.callout[data-callout=masonry] > .callout-content > p {
  column-count: var(--masonry-column-count);
  column-gap: var(--masonry-gap);
}
.callout[data-callout=masonry] > .callout-title {
  display: none;
}
.callout[data-callout=masonry] img {
  border-radius: var(--radius-m);
}
.callout[data-callout=masonry] a {
  font-size: 0;
}

.callout[data-callout=masonry][data-callout-metadata~=col-2] {
  --masonry-column-count: 2;
}

.callout[data-callout=masonry][data-callout-metadata~=col-3] {
  --masonry-column-count: 3;
}

.callout[data-callout=masonry][data-callout-metadata~=col-4] {
  --masonry-column-count: 4;
}

.callout[data-callout=masonry][data-callout-metadata~=col-5] {
  --masonry-column-count: 5;
}

.callout[data-callout=masonry][data-callout-metadata~=col-6] {
  --masonry-column-count: 6;
}

.callout[data-callout=masonry][data-callout-metadata~=col-7] {
  --masonry-column-count: 7;
}

.callout[data-callout=masonry][data-callout-metadata~=col-8] {
  --masonry-column-count: 8;
}

.callout[data-callout=masonry][data-callout-metadata~=col-9] {
  --masonry-column-count: 9;
}

.callout[data-callout=masonry][data-callout-metadata=horizontal] > .callout-content > p {
  column-count: unset;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--masonry-gap);
}
.callout[data-callout=masonry][data-callout-metadata=horizontal] > .callout-content > p > * {
  flex-grow: 1;
}
.callout[data-callout=masonry][data-callout-metadata=horizontal] img {
  height: var(--masonry-row-height);
  width: 100%;
  object-fit: cover;
}
.callout[data-callout=masonry][data-callout-metadata=horizontal] > .callout-content > p > *:last-child {
  flex-grow: unset;
}
.callout[data-callout=masonry][data-callout-metadata=horizontal] br {
  display: none;
}

/* Fix for Minimal theme and img-grid cssclass */
.callout[data-callout=masonry]:not([data-callout-metadata=horizontal]) > .callout-content > p {
  display: block !important;
  column-gap: 0.5rem;
}

.callout[data-callout=masonry] .image-embed {
  display: initial;
}
