// Core/gallery block
.is-grid,
.blocks-gallery-grid {
  display: grid;
  padding-left: 0;

  .blocks-gallery-item {
    margin: 0;
    width: 100%;
  }
}

// Editor fix
figure.wp-block-gallery[data-block] {
  margin-left: 0;
  margin-right: 0;
  // May be not ideal for big image sizes
  // stylelint-disable-next-line csstools/value-no-unknown-custom-properties
  max-width: var(--width-child-img);
}

.is-grid,
.wp-block-gallery {
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  width: calc(100% - calc(var(--padding-container-horizontal) * 2));

  figcaption {
    color: var(--color-white);
    font-size: var(--font-size-16);
    line-height: 1.55;
    width: 100%;
  }

  img {
    margin-bottom: 0;
  }

  &.alignwide {
    padding-left: 0;
    padding-right: 0;
    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
  }

  &.alignfull {
    padding-left: var(--padding-container-horizontal);
    padding-right: var(--padding-container-horizontal);
    width: 100%;
  }

  // If we have only one column
  &.columns-1 {
    max-width: $width-max-article;
    padding: 0;

    figure {
      // May be not ideal for big image sizes
      // stylelint-disable-next-line csstools/value-no-unknown-custom-properties
      max-width: var(--width-child-img);
    }

    @media (min-width: $width-max-article) {
      display: block;
      overflow: visible;

      // If the one column is aligned
      // stylelint-disable-next-line selector-max-specificity
      &.alignleft > .blocks-gallery-grid {
        margin-bottom: 4rem;
        margin-right: 4rem;
      }

      // stylelint-disable-next-line selector-max-specificity, no-descending-specificity
      &.alignright > .blocks-gallery-grid {
        margin-bottom: 4rem;
        margin-left: 4rem;
      }
    }

    @media (max-width: $width-max-article) {
      // stylelint-disable selector-max-specificity, no-descending-specificity
      &.alignleft > .blocks-gallery-grid,
      &.alignright > .blocks-gallery-grid {
        float: none;
        width: 100%;
      }
    }
  }
}

// Loops to enumerate the classes for columns.
@for $i from 2 through 9 {
  .is-grid.columns-#{$i},
  .columns-#{$i} .blocks-gallery-grid {
    grid-gap: 3rem;
    // doiuse-disable
    grid-template-columns: repeat($i, 1fr);

    @media (max-width: 1000px) {
      // doiuse-disable
      grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 670px) {
      grid-gap: 2rem;
      // doiuse-disable
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

.blocks-gallery-item > figure figcaption {
  margin-bottom: 0;
}